知识点
1)使用浏览器请求网页的时候,浏览器会去后台服务器上下载网页的HTML文档
2)HTML文档里面可以通过script标签引入外部的JS文件,JS文件的访问路径可以通过src属性设置
3)浏览器根据这些JS文件的访问路径到指定的远程服务器上进行下载
4)当Web事件(比如点击事件,鼠标事件,表单提交等)发生时,浏览器就会执行本地JS文件里面的相关代码
5)有技术背景的用户可以修改本地的JS代码,完成非法数据的提交
薪资计算
假设员工税前工资10000元,扣除社保300元。
适用5000元新的费用标准和新的税率表
1)应纳所得额=10000-300-5000=4700元
2)应纳个人所得税额:4700*0.1-210=260元
全月应纳税所得额 | 税率 | 速算扣除数(元) |
---|---|---|
不超过3000元 | 3% | 0 |
超过3000元至12000元 | 10% | 210 |
超过12000元至25000元 | 20% | 1410 |
超过25000元至35000元 | 25% | 2660 |
超过35000元至55000元 | 30% | 4410 |
超过55000元至80000元 | 35% | 7160 |
超过80000元 | 45% | 15160 |
HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/demo.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<h1>上海市五险一金及税后工资计算器</h1>
<table border="0" width="70%">
<tr>
<th>税前:</th>
<td>
<input type="text" id="salary" value="0.0" />
<input type="button" value="计算" onclick="showSalary();" />
</td>
</tr>
<tr>
<th>社保汇缴基数:</th><td><input type="text" id="benifit" value="4279.0" /></td>
</tr>
<tr>
<th>公积金基数:</th><td><input type="text" id="benifit2" value="2300.0" /></td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" width="70%">
<tr>
<th>养老保险金(个人):</th><td id="td01">0.0</td>
<th>养老保险金(公司):</th><td id="td02">0.0</td>
</tr>
<tr>
<th>医疗保险金(个人):</th><td id="td03">0.0</td>
<th>医疗保险金(公司):</th><td id="td04">0.0</td>
</tr>
<tr>
<th>失业保险金(个人):</th><td id="td05">0.0</td>
<th>失业保险金(公司):</th><td id="td06">0.0</td>
</tr>
<tr>
<th>基本住房公积金(个人):</th><td id="td07">0.0</td>
<th>基本住房公积金(公司):</th><td id="td08">0.0</td>
</tr>
<tr>
<th> </th><td> </td>
<th>工伤保险金(公司):</th><td id="td09">0.0</td>
</tr>
<tr>
<th> </th><td> </td>
<th>生育保险金(公司):</th><td id="td10">0.0</td>
</tr>
<tr>
<th>扣除四金后月薪:</th><td id="td11">0.0</td><th> </th><td> </td>
</tr>
<tr>
<th>个人所得税:</th><td id="td12">0.0</td>
<th> </th><td> </td>
</tr>
<tr>
<th>税后月薪:</th><td id="td13">0.0</td>
<th> </th><td> </td>
</tr>
</table>
</body>
</html>
JS代码
function showSalary(){
var salary = document.getElementById("salary").value.trim();//获取税前薪资
var base = document.getElementById("benifit").value.trim();//获取社保基数
//var base = parseFloat(document.getElementById("benifit").value).trim();//获取社保基数
var base2 = document.getElementById("benifit2").value.trim();//获取公积金基数
if(salary==""||salary==undefined||base==""||base==undefined||base2==""||base2==undefined){
alert("金额不能为空");
return; //结束函数的执行
}
if(isNaN(salary)||isNaN(base)||isNaN(base2)){
alert("输入的金额必须是数值");
return; //结束函数的执行
}
var yanglaoSelf = base*0.08;//计算个人缴纳的养老金
var yanglaoCompany = base*0.2;//计算公司缴纳的养老金
var yiliaoSelf = base*0.02;//计算个人缴纳的医疗保险
var yiliaoCompany = base*0.095;//计算公司缴纳的医疗保险
var shiyeSelf = base*0.005;//计算个人缴纳的失业保险
var shiyeCompany = base*0.005;//计算公司缴纳的失业保险
var gongjijinSelf = base2*0.07;//计算个人缴纳的公积金
var gongjijinCompany = base2*0.07;//计算公司缴纳的公积金
var gongshangCompany = base*0.002;//计算公司缴纳的工伤保险金
var shengyuCompany = base*0.01;//计算公司缴纳的生育保险金
var salary2 = salary - yanglaoSelf - yiliaoSelf - shiyeSelf - gongjijinSelf;
var yingna = salary2 - 5000;//应纳税所得额
var tax = 0.0;
if(yingna<=0){
tax = 0.0;
}else if(yingna<=3000){
tax = yingna*0.03;
}else if(yingna<=12000){
tax = yingna*0.1 - 210;
}else if(yingna<=25000){
tax = yingna*0.2 - 1410;
}else if(yingna<=35000){
tax = yingna*0.25 - 2660;
}else if(yingna<=55000){
tax = yingna*0.3 - 4410;
}else if(yingna<=80000){
tax = yingna*0.35 - 7160;
}else{
tax = yingna*0.45 - 15160;
}
document.getElementById("td01").innerText = yanglaoSelf.toFixed(2);//
document.getElementById("td02").innerText = yanglaoCompany.toFixed(2);//
document.getElementById("td03").innerText = yiliaoSelf.toFixed(2);//
document.getElementById("td04").innerText = yiliaoCompany.toFixed(2);//
document.getElementById("td05").innerText = shiyeSelf.toFixed(2);//
document.getElementById("td06").innerText = shiyeCompany.toFixed(2);//
document.getElementById("td07").innerText = gongjijinSelf.toFixed(2);//
document.getElementById("td08").innerText = gongjijinCompany.toFixed(2);//
document.getElementById("td09").innerText = gongshangCompany.toFixed(2);//
document.getElementById("td10").innerText = shengyuCompany.toFixed(2);//
document.getElementById("td11").innerText = salary2.toFixed(2);//
document.getElementById("td12").innerText = tax.toFixed(2);
document.getElementById("td13").innerText = (salary2 - tax).toFixed(2);
}
淡入淡出
HTML代码和CSS代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/animate.css"/>
<style type="text/css">
.green{
position: relative;
border-radius: 5px;
left: 30%;
width: 30%;
height: 150px;
background-color: green;
vertical-align: middle;
}
.hide{
display: none;
}
h2{
text-align: center;
line-height: 150px;
color: white;
}
</style>
<script src="js/demo.js" type="text/javascript" charset="utf-8"></script>
</head>
<body onload="begin();">
<div>
<h1>这是一个标题</h1>
<input type="button" id="btn" value="点击我" onclick="meet();"/>
</div>
<div class="green hide animated" id="div01">
<h2>晚上8点,老地方见!</h2>
</div>
</body>
</html>
JS代码
function meet(){
var yesOrNo = confirm("确定要见面吗?");//
if(yesOrNo == true){
showDiv();
}
}
var isFadeOut = false;//是否淡出
var div = undefined;
function begin(){ //加载页面的时候会执行该函数
div = document.getElementById("div01");//找到提示框
div.addEventListener("animationend",function(){//动画结束时,调用匿名函数
if(isFadeOut==true){
div.classList.add("hide");//给class属性值列表添加hide这个值(提示框就会被隐藏)
document.getElementById("btn").removeAttribute("disabled");
}
});
}
function showDiv(){
document.getElementById("btn").disabled="disabled";
//div.style.display="block";//显示该提示框
div.classList.remove("hide");//从class属性值列表里面删除hide这个值
div.classList.remove("fadeOut");
div.classList.add("fadeInDown");//淡入
isFadeOut = false;
setTimeout(function(){
div.classList.remove("fadeInDown")
div.classList.add("fadeOut");//淡出
isFadeOut = true;
},2000);
}
综合案例
HTML代码+CSS代码+JS代码
<html>
<head>
<meta charset="utf-8" />
<style>
p{
font-size:20px;
border:2px solid black;
}
p:hover{
border:2px solid blue;
color: red;
}
div{
background-color: red;
color: white;
width: 30%;
height: 150px;
float: left;
text-align: center;
margin: 10px;
}
</style>
<script type="text/javascript">
var i = 0; //
var e1;
var e2;
function change7(){
//根据id的内容找到第一个灯泡,e1就是第一个灯泡
e1 = document.getElementById("img01");
//根据id的内容找到第二个灯泡,e2就是第二个灯泡
e2 = document.getElementById("img02");
setInterval(
function(){
change(e1);//改变第一个灯泡的状态
},2000);
setInterval(
function(){
change(e2);//改变第二个灯泡的状态
},1000);
}
function change(e){ //变量e表示被点击的元素
if(e.src.match("bulboff")){ //如果灯泡不亮的话
e.src = "img/pic_bulbon.gif"; //图片的地址修改为pic_bulbon.gif
}else{ //否则
e.src = "img/pic_bulboff.gif"; //图片的地址修改为pic_bulboff.gif
}
}
function change6(e){
i++;//
if(i==1){
e.innerHTML="<h1>点击我</h1><h1>再点一次</h1>";//
}
if(i==2){
e.innerHTML="<h1>谢谢你</h1>";//
}
if(i==3){
e.innerHTML="<h1>再见</h1>";//
}
if(i==4){
e.style.display="none";//
}
}
function change4(e){
console.log("abc");
e.innerHTML="<h1>谢谢你</h1>";
}
function change5(e){
//console.log("abc");
e.innerHTML="<h1>鼠标移上来</h1>";
}
function info(){
alert("hello js");
}
</script>
</head>
<body onload="change7();">
<h1>这是一个标题</h1>
<div onmouseover="change4(this);" onmouseout="change5(this);">
<h1>鼠标移上来</h1>
</div>
<div onclick="change6(this);">
<h1>点击我</h1>
</div>
<h1 style="clear:both;">这是一个标题</h1>
<p>
6月18日,记者从商务部网站获悉,上周(6月10日至16日)全国食用农产品市场价格比前一周下降0.6%。<br/>其中,30种蔬菜平均批发比前一周下降4%,呈加速回落趋势。
</p>
<h1>这是一个标题</h1>
<img src="img/pic_bulboff.gif" id="img01"><!--this表示当前这个元素-->
<img src="img/pic_bulboff.gif" id="img02"><!--this表示当前这个元素-->
<h1>这是一个标题</h1>
<input type="button" value="点击我" onclick="info();"/>
<input type="button" value="点击我" onclick="info();"/>
<input type="button" value="点击我" onclick="info();"/>
</body>
</html>
表单校验
HTML代码+CSS代码+JS代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.error{
color:red;
font-size: 12px;
}
.hide{
display: none;
}
</style>
<script type="text/javascript">
var form = undefined;
var span = undefined;
/**
* 根据正则表达式检查输入框里面的内容是否合法
* @param {Object} box 表示输入框
* @param {Object} reg 表示正则表达式
*/
function checkItem(box,reg){
form = document.getElementById("register");
span = box.nextSibling.nextSibling;
if(reg.test(box.value)){
span.classList.add("hide");
return true;
}else{
span.classList.remove("hide");
return false;
}
}
/**
* 检查确认密码是否正确
* @param {Object} box 表示确认密码输入框
*/
function checkPassword2(box){
span = box.nextSibling.nextSibling;
var pwd = document.getElementById("passwd").value;
if(box.value==""||box.value==undefined){//判断确认密码是否为空
span.classList.remove("hide");
return false;
}
if(box.value==pwd){//判断确认密码和密码是否相同
span.classList.add("hide");
return true;
}else{
span.classList.remove("hide");
return false;
}
}
/**
* 校验表单数据是否合法
*/
function validate(){
form = document.getElementById("register");
//获取用户名输入框
var userBox = form.username;
//获取密码输入框
var pwdBox = form.passwd;
//获取确认密码输入框
var pwd2Box = form.passwd2;
//获取手机号码输入框
var mobileBox = form.mobile;
var usernameIsOk = checkItem(userBox,/^\w{6,}$/);//
var passwordIsOk = checkItem(pwdBox,/^.{8,}$/);//
var password2IsOk = checkPassword2(pwd2Box);
var mobileIsOk = checkItem(mobileBox,/^\d{11}$/);
if(usernameIsOk&&passwordIsOk&&password2IsOk&&mobileIsOk){
alert("数据已经提交");
return true;
}else{
alert("输入的内容错误,提交失败!");
return false;
}
}
</script>
</head>
<body>
<form action="#" method="post" id="register" onsubmit="return validate();">
<table border="0" width="100%">
<tr>
<th width="20%">*用户名:</th>
<td>
<input type="text" name="username" id="username" onblur="checkItem(this,/^\w{6,}$/);" />
<span class="hide error">用户名不能为空,不能使用中文,字符个数不能少于6个</span>
</td>
</tr>
<tr>
<th>*密码:</th>
<td>
<input type="password" name="passwd" id="passwd" onblur="checkItem(this,/^.{8,}$/);"/>
<span class="hide error">密码不能为空,密码位数不能少于8位</span>
</td>
</tr>
<tr>
<th>*确认密码:</th>
<td>
<input type="password" name="passwd2" id="passwd2" onblur="checkPassword2(this);"/>
<span class="hide error">确认密码不能为空,且确认密码必须与密码相同</span>
</td>
</tr>
<tr>
<th>*手机号码:</th>
<td>
<input type="text" name="mobile" id="mobile" onblur="checkItem(this,/^\d{11}$/);"/>
<span class="hide error">手机号码必须是11位数字</span>
</td>
</tr>
<tr><td></td><td><input type="submit" value="注册"/></td></tr>
</table>
</form>
</body>
</html>
参考资料
[01] JavaScript 使用
http://www.w3school.com.cn/js/js_shiyong.asp
[02] Document 对象方法
http://www.w3school.com.cn/jsref/dom_obj_document.asp
[03] JS全局函数
http://www.w3school.com.cn/jsref/jsref_obj_global.asp
[04] Window 对象方法
http://www.w3school.com.cn/jsref/dom_obj_window.asp
[05] JavaScript HTML DOM 事件
http://www.w3school.com.cn/js/js_htmldom_events.asp
[06] HTML DOM Event 对象
http://www.w3school.com.cn/jsref/dom_obj_event.asp
[07] JavaScript Timing 事件
http://www.w3school.com.cn/js/js_timing.asp
[08] CSS3 动画
http://www.w3school.com.cn/css3/css3_animation.asp
[09] css3+原生js实现toast提示层弹框(淡入淡出动画效果)
https://blog.csdn.net/codeTnt/article/details/81030077
[10] 前端必须珍藏六个CSS3动效库
https://www.jianshu.com/p/36e604232e6e
[11] Animate.css动画演示
http://www.jq22.com/yanshi819
[12] Animate.css的使用
https://www.cnblogs.com/e-cat/p/8439221.html
[13] JavaScript 算术
http://www.w3school.com.cn/js/js_arithmetic.asp
[14] 个人所得税计算
http://www.zhicheng.com/n/20181128/232743.html
[15] 新个税税率表
https://www.gerensuodeshui.cn/view/2018-10-11/b534ba68236ba543ae44.html
[16] JavaScript trim() 方法
https://www.runoob.com/jsref/jsref-trim.html
[17] JavaScript String 对象(字符串对象)
https://www.runoob.com/jsref/jsref-obj-string.html
[18] JavaScript toFixed() 方法
http://www.w3school.com.cn/jsref/jsref_tofixed.asp
[19] HTML DOM confirm() 方法
http://www.w3school.com.cn/jsref/met_win_confirm.asp
[20] JavaScript parseFloat() 函数
http://www.w3school.com.cn/jsref/jsref_parseFloat.asp
[21] JavaScript parseInt() 函数
http://www.w3school.com.cn/jsref/jsref_parseInt.asp
[22] JavaScript isNaN() 函数
http://www.w3school.com.cn/jsref/jsref_isNaN.asp
[23] 最全面的常用正则表达式大全
https://www.cnblogs.com/yunspider/p/8280132.html
[24] 正则表达式总结
https://www.cnblogs.com/yyds/p/6913550.html
微信扫一扫关注公众号
点击链接加入群聊
https://jq.qq.com/?_wv=1027&k=5eVEhfN
软件测试学习交流QQ群号:511619105