蓝桥模拟赛刷题之计算个人所得税

「这是我参与2022首次更文挑战的第27天，活动详情查看：2022首次更文挑战」

实现个人所得税功能

蓝桥第一次线上模拟赛的第三题，要让我们实现一个个人所得税计算功能，原生实现

具体要求

题目的具体要求就是不同的薪资，按照不同规模的百分比来计算，即当小于5k，没有含税部分，而超过部分按照超过多少并乘以不同数量对应的比例。下面是HTML结构，一个表单一个按钮还有一段文本，我们在表单中输入我们的薪资，最后通过事件计算得出最后的结果。

<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>  

功能实现

1. DOM绑定

   首先我们需要对三个dom元素进行对应所需事件的绑定，即我们需要对按钮绑定一个点击事件，并通过DOM获取到表单内我们所填的薪资数据，然后进行一个判断作为提示，最后由于我们拿到的字符串，所以我们需要通过使用parseInt来将我们获取的薪资字符串转换为数字，然后我们再通过薪资计算函数进行计算，最后绑定到我们设置的段落中并渲染

   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;
       };
   

2. 薪资计算函数

   最重要的就是薪资计算函数了，先看一下我最初写的一个解决方案，我们是使用if嵌套来实现的，其中需要判断每个额度的范围，再来计算最后的数据，这样的话代码还是很麻烦的，而且在比赛中还是很耗时间，这也是我对于一些语法，还有逻辑上的不熟练，所以就使用另外一种写法。

   var shui;
       if (salary <= 5000) {
            shui = 0;
       } else if (salary <= 9000) {
            shui = (salary - 5000) * 0.03;
       } else if (salary <=15000) {
            shui = (salary - 5000) * 0.05;
       } else {
       shui = (salary - 5000) * 0.1;
   }
       return shui;
   

   这种写法是通过？：来进行计算的，代码简洁，所以当我们出现了要使用多个判断来计算的场景的时候，我们就可以来使用这种代码，有效减少代码冗余

       let res = salary <= 5000 ? 0 :
       salary <= 9000 ? (salary - 5000) * 0.03 :
       salary <= 15000 ? (salary - 5000) * 0.05 :
       (salary - 5000) * 0.1
       return res