jquery 的税收计算器（仅限参考）

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" >计&emsp;&emsp;算</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: "-￥";
}

效果如下：

jquery 的税收计算器（仅限参考）相关推荐

Android Studio安装插件提示was not installed: Cannot download的解决办法(仅限AS2.2版本以上)
这是报错消息: Plugin Android ButterKnife Plugin Plus was not installed: Cannot download 'http://plugins.je ...
基于java的高校运动会管理系统的设计与实现--毕业论文（可仅作参考）
基于java的高校运动会管理系统的设计与实现–毕业论文(可仅作参考) 可以仅作参考宝子们 ,这个版本包含代码哦~在资源里面自己找代码包论文word版本我会上传到资源里面供宝子看文章目录基于jav ...
中国高校与研究院所计算机学科分专业点评(本贴内容仅供参考！)
[2014/4/13:近5年来中科院系统经历了一些较大的变化,如人员流动,实验室更名等,以下部分内容未能因此更新,故可能失效甚至有较大误导,请大家自己注意辨别,有问题请向现任版主和中科院学生了解.时间 ...
增值电信业务经营许可证-仅限互联网信息服务-信息服务业务许可证如何办理，办理流程汇总
增值电信业务经营许可证-仅限互联网信息服务-信息服务业务许可证如何办理,您办理流程汇总如下:什么是增值电信业务经营许可证?增值电信业务许可证主要是做什么用的?类别都有哪些区分,每种类别分别对应什么业务 ...
关于springboot访问不到static里面的js文件解决方法（仅供参考）
关于springboot访问不到static里面的js文件解决方法(仅供参考) 遇到的问题 1.在html页面中引入jQuery文件后使用$符号会提示未被定义 2.静态资源无法访问解决方法 1.$符 ...
2019第十届蓝桥杯C++B组题解（赛后重写的，不确保答案正确性，仅供参考）
先说一下这次的感受吧,我们考场比较乱,开始比赛了,还有的电脑有故障,(向这些人发出同情),第一次认真参加比赛,真正比赛的时候感觉没有那么正式,很乱,各种小问题,(例如博主就没找到题目在哪里,找到后又不 ...
[该视频仅限大陆地区播放的最优解决方案] Ginnay v0.23
这个程序我发誓,是除了回国之外,用来解决"该视频仅限大陆地区观看"的最优.最简便.最傻瓜的方案了-- (现在不是我的好友也可以正常使用Ginnay啦,但是我的好友们额外享受一对一技 ...
航空发动机适航考题梳理（仅供参考）
目录 (一)判断题(共5道) 考点01 适航标准考点02 型号合格审定考点03 持续适航文件与发动机安装和使用说明手册考点04 功率与推力响应试验考点05 包容性试验考点06 持久试验考点 ...
什么是互联网大厂_仅限今天！大厂最热数据分析经典实战项目大公开！
原标题:仅限今天!大厂最热数据分析经典实战项目大公开! 如今,全球早已步入数据时代,随着行业的高速发展,相关岗位缺口已超150万,且薪资超同行业50%.未来十年,数据细分岗位将扩张5倍,各行业数据人才 ...
steam你所在的国家不允许看到此内容_Steam德国屏蔽“仅限成人”标签众多3A大作可能被禁...
斑马网12月24日消息,据外媒报道,有不少德国Steam用户表示,德国玩家现在已经无法在Steam上购买(浏览)成年人的游戏. 近日有不少德国玩家在Reddit论坛吐槽其无法在Steam上选择&quo ...

jquery 的税收计算器（仅限参考）

jquery 的税收计算器（仅限参考）相关推荐

最新文章

热门文章