实现个人所得税功能
蓝桥第一次线上模拟赛的第三题，要让我们实现一个个人所得税计算功能，原生实现
具体要求
题目的具体要求就是不同的薪资，按照不同规模的百分比来计算，即当小于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> 复制代码
功能实现
- 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; }; 复制代码
- 薪资计算函数
最重要的就是薪资计算函数了，先看一下我最初写的一个解决方案，我们是使用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
