jquery 的税收计算器;(首先你要有jquery.js文件,可以在创建好自己的.js文件),因为这样做能让思路清晰化,
首先是html 代码 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>个税计算器</title>
<link rel="stylesheet" href="taxation.css">
<script src="jquery.min.js"></script>
<script src="taxation.js"></script>
</head>
<body>
<div>
<input id="gongzi" type="text" class="control" placeholder="工资">
<input id="jiangjin" type="text" class="control" placeholder="奖金">
<input id="jixiao" type="text" class="control" placeholder="考勤">
<button id="btn" class="control" >计  算</button>
</div>
<!--用表格的方式来书写-->
<div id="result">
<table id="tb">
<tr>
<td>总工资</td>
<td id="zgz">0000</td>
</tr>
<tr>
<td>养老保险8%</td>
<td id="ylbx" class="kouchu">0000</td>
</tr>
<tr>
<td>公积金8%</td>
<td id="gjj" class="kouchu">0000</td>
</tr>
<tr>
<td>税前工资(扣除五险一金后)</td>
<td id="sqgz">0000</td>
</tr>
<tr>
<td>所得税</td>
<td id="sds" class="kouchu">0000</td>
</tr>
<tr>
<td>税后工资</td>
<td id="shgz">0000</td>
</tr>
</table>
</div>
</body>
</html>
然后是自己的 .js 文件
$(document).ready(function () {
$("#btn").click(function () {
var total = $("#gongzi").val() * 1 +
$("#jiangjin").val() * 1 +
$("#jixiao").val() * 1;
var yanglaobaoxian = total * 0.08;
var gongjijin = total * 0.08;
var shuiqiangongzi = total - yanglaobaoxian - gongjijin;
var geshui = calcTax(shuiqiangongzi);
var shuihougongzi = shuiqiangongzi - geshui;
// 数字对象的.tofix()方法,四舍五入,括号里面的是(保留n位小数),结果是一个字符串。
$("#zgz").text(total.toFixed(2));
$("#ylbx").text(yanglaobaoxian.toFixed(2));
$("#gjj").text(gongjijin.toFixed(2));
$("#sqgz").text(shuiqiangongzi.toFixed(2));
$("#sds").text(geshui.toFixed(2));
$("#shgz").text(shuihougongzi.toFixed(2));
$("#result").slideDown();
});
})
function salaryChange(){
var total = $("#gongzi").val()*1+
$("#jiangjin").val()*1+
$("#jixiao").val()*1;
if(total>=1500){
$("#btn").prop("disabled",false);
}else{
$("#btn").prop("disabled",true);
}
$("#result").fadeOut();
}
$("#gongzi").on("input",salaryChange);
$("#jiangjin").on("input",salaryChange);
$("#jixiao").on("input",salaryChange);
function calcTax(sqgz){
if(sqgz<=3500){
return 0;
}else{
var tax = 0;
var ynse = sqgz - 3500;
if(ynse<=1500){
tax = ynse*0.03;
}else if(ynse<=4500){
tax = ynse*0.1-105;
}else if(ynse<=9000){
tax = ynse*0.2-555;
}else if(ynse<=35000){
tax = ynse*0.25-1005;
}else if(ynse<=55000){
tax = ynse*0.3-2755;
}else if(ynse<=80000){
tax = ynse*0.35-5505;
}else{
tax = ynse*0.45-13505;
}
return tax;
}
}
$("#result").hide();
css 样式文件
*{
box-sizing: border-box;
}
body{
margin: 0;
padding: 10px;
}
.control{
width: 100%;
height: 40px;
border-radius: 5px;
margin: 5px 0;
}
input.control{
border: solid 1px grey;
font-size: 18px;
padding-left: 10px;
}
input.control:hover{
border: solid 1px skyblue;
}
input.control:focus{
box-shadow: 0 0 10px 0 skyblue inset;
}
button.control{
border: none;
background-color: cyan;
color: white;
font-size: 20px;
}
button[disabled]{
background-color: #ccc;
}
#tb{
width: 100%;
}
#tb td:nth-of-type(2){
text-align: right;
color: red;
}
#tb td:nth-of-type(2):before{
content: "¥";
}
#tb td.kouchu:before{
content: "-¥";
}
效果如下 :