蓝桥杯web：3.【功能实现】封装函数实现个人所得税计算器

背景介绍

JavaScript 可以帮助开发者实现许多非常实用的功能。本次将通过 JavaScript 封装函数来实现一个简易的个人所得税计算器。

打开环境右侧的【Web 服务】，效果如下：

需要注意这是一个功能不完整的简单个人所得税计算器。

考试需求

基于挑战提供的基础代码，完善个人所得税计算器结构，实现当用户在文本框中输入薪资后，单击计算按钮，即可将计算后的结果显示到页面中。

例如：

当输入 5000，根据个人所得税规则无需缴税，页面效果如下：

当输入 8000，根据个人所得税规则，税率为 3%。首先扣除无需缴纳的个人所得税额 5000 元后，再就剩下的金额根据税率 3%，计算个人所得税，页面效果如下：

当输入 10000，根据个人所得税规则，税率为 5%。首先扣除无需缴纳的个人所得税额 5000 元后，再就剩下的金额根据税率 5%，计算个人所得税，页面效果如下：

html代码：

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>个人所得税计算器</title><link rel="stylesheet" href="bootstrap.min.css" type="text/css" />
</head><body><div class="container"><h3>个人所得税计算器</h3><div><h5>规则</h5><ol><li>薪资小于等于5000元，则无需缴税</li><li>薪资大于5000元且小于等于9000，税率为3%</li><li>薪资大于9000元且小于等于15000，税率为5%</li><li>薪资大于15000，税率为10%</li></ol></div>  <input type="number" required class="form-control" style="width: 50%;" id="salary" placeholder="请输入您的工资"><button type="submit" class="btn btn-primary" id="btnsubmit">计算</button><p>您需要缴税<span id="val">0</span>元</p>  </div></body>
<script type="text/javascript" src="index.js"></script>
<script>document.getElementById("btnsubmit").onclick = function() {var salary = document.getElementById("salary").value; //薪资if (salary <= 0) {alert("薪资不能为0或小于0");return false;}var result = cal(parseInt(salary));document.getElementById("val").innerText = result;};
</script></html>

需要补充的js代码

function cal(salary) {// TODO: 在此处补充代码var m;if(salary<=5000){m=0;}else if(salary>5000&&salary<=9000){m=(salary-5000)*0.03;}else if(salary>9000&&salary<=15000){m=(salary-5000)*0.05;}else{m=(salary-5000)*0.1;}return m;
}
module.exports = cal; //请勿删除

蓝桥杯web：3.【功能实现】封装函数实现个人所得税计算器相关推荐

第十三届蓝桥杯（Web 应用开发）线上模拟赛【第三题】（封装函数实现个人所得税计算器）
考试需求基于挑战提供的基础代码,完善个人所得税计算器结构,实现当用户在文本框中输入薪资后,单击计算按钮,即可将计算后的结果显示到页面中. 例如: 当输入 5000,根据个人所得税规则无需缴税,页面效 ...
【蓝桥杯Web】第十三届蓝桥杯（Web 应用开发）第一次线上模拟赛
前言第十三届蓝桥杯全国软件和信息技术专业人才大赛(软件类)新开了Web应用开发比赛,已经组织了几次模拟赛和楼赛,这里主要记录模拟赛题目和设计的知识点,帮助参赛者更好的复习琐碎的知识点和代码,有写的不 ...
【蓝桥杯Web】2022年第十三届蓝桥杯Web大学组国赛真题解析
前言省赛真题解析见: 2022年第十三届蓝桥杯Web大学组省赛真题解析(完整版) 2022年第十三届蓝桥杯Web大学组省赛真题解析(精华版) 更多蓝桥杯题解请查阅专栏:蓝桥杯之前写省赛解析时篇幅过 ...
【蓝桥杯Web】第十三届蓝桥杯（Web 应用开发）省赛真题
前言第十三届蓝桥杯全国软件和信息技术专业人才大赛(软件类)新开了Web应用开发比赛,本文介绍第十三届蓝桥杯Web应用开发的省赛题目以及解析. 文章目录前言一.水果拼盘二.展开你的扇子三.和手 ...
蓝桥杯 Web 应用开发模拟赛首次公开！参赛选手速进！
第十三届蓝桥杯大赛报名通道正式开启,你行动起来了吗? 很多细心的小伙伴一定看到了,这届蓝桥杯大赛中新增了 Web 应用开发组.这是 Web 应用开发首次出现在杯赛中,所以没有历年真题可以供参赛选手刷题 ...
蓝桥杯单片机必备知识-----(1)显示函数
蓝桥杯单片机必备知识---------(1)显示函数全局变量 code unsigned char tab[] = {0xc0,0xf9,0xa4,0xb0,0x99,0x92,0x82,0xf8, ...
Java语言strcmp函数用法_蓝桥杯算法提高 11-1实现strcmp函数（JAVA方法）
蓝桥杯算法提高 11-1实现strcmp函数 (JAVA方法) 首先这不是一个多难的题,但是网上的我没怎么找到有Java的代码,基本全都是c语言的,小编是个小白,如果有不对的地方请联系小编问题描述 ...
蓝桥杯Web应用开发
文章目录介绍策略课程题目学习笔记 1.水果拼盘 2.分一分 3.冬奥大抽奖 4.灯的颜色变化 5.购物车 6.类型判断 7.商品销量和销售额实时展示看板 8.粒粒皆辛苦 9.水果叠叠乐 10 ...
第十三届蓝桥杯Web应用开发（大学组）
文章目录前言 01.水果盘 **题目:** **解答:** 02.展开你的扇子题目解答: 03.和手机相处的时光题目解答 04.灯的颜色变化题目解答 05.冬奥大抽奖题目解答 06蓝 ...

蓝桥杯web：3.【功能实现】封装函数实现个人所得税计算器

背景介绍

考试需求

蓝桥杯web：3.【功能实现】封装函数实现个人所得税计算器相关推荐

最新文章

热门文章