H5编写个税计算器(JS代码编写).docx

document.title=个税计算器;/写头部内容。var header=document.createElement(header);header.innerHTML=个税计算器;document.body.appendChild(header);header.style.backgroundColor=blue;header.style.height=50px;header.style.textAlign=center;header.style.fontSize=30px;header.style.lineHeight=50px;header.style.color=white;/写输入框。var form=document.createElement(form);document.body.appendChild(form);var input1=document.createElement(input);form.appendChild(input1);input1.type=text;input1.placeholder=基本工资;input1.style.width=100%;input1.style.height=40px;input1.style.marginTop=15px;input1.style.fontSize=30px;input1.innerHTML.placeholder=基本工资/计税;var input2=document.createElement(input);form.appendChild(input2);input2.type=text;input2.placeholder=绩效工资及工龄工资;input2.style.width=100%;input2.style.height=40px;input2.style.marginTop=15px;input2.style.fontSize=30px;input2.style.placeholder=绩效工资/计税;var input3=document.createElement(input);form.appendChild(input3);input3.type=text;input3.placeholder=奖金及其它收入;input3.style.width=100%;input3.style.height=40px;input3.style.marginTop=10px;input3.style.fontSize=30px;input3.style.placeholder=奖金/计税;/写计算按钮var button=document.createElement(button);document.body.appendChild(button);button.innerHTML=开始计算;button.style.backgroundColor=lightskyblue;button.style.textAlign=center;button.style.fontSize=30px;button.style.height=50px;button.style.width=100%;button.style.margin=10px auto;/button.style.margin=/写主题内容/定义一个主体区域用于存放主体内容。var sec=document.createElement(section);document.body.appendChild(sec);/工资总额部分var dl=document.createElement(dl);sec.appendChild(dl);var dt=document.createElement(dt);dl.appendChild(dt);dt.innerHTML=工资总额;var dd=document.createElement(dd);dl.appendChild(dd);dd.innerHTML=0.00;dt.style.float=left;dd.style.float=right;dl.style.marginTop=15px;dl.style.marginBottom=5px;dl.style.height=30px;dt.style.height=30px;dt.style.fontSize=24px;dd.style.fontSize=24px;/写分割线var hr=document.createElement(hr);sec.appendChild(hr);hr.style.margin=0;/写养老部分8%var dl1=document.createElement(dl);sec.appendChild(dl1);var dt1=document.createElement(dt);dl1.appendChild(dt1);dt1.innerHTML=养老保险 8%;var dd1=document.createElement(dd);dl1.appendChild(dd1);dd1.innerHTML=-0.00;dt1.style.float=left;dd1.style.float=right;dl1.style.marginTop=15px;dl1.style.marginBottom=5px;dl1.style.height=30px;dt1.style.height=30px;dt1.style.fontSize=24px;dt1.style.color=red;dd1.style.fontSize=24px;dd1.style.color=red;/写医疗 2%部分var dl2=document.createElement(dl);sec.appendChild(dl2);var dt2=document.createElement(dt);dl2.appendChild(dt2);dt2.innerHTML=医疗保险 2%;var dd2=document.createElement(dd);dl2.appendChild(dd2);dd2.innerHTML=-0.00;dt2.style.float=left;dd2.style.float=right;dl2.style.marginTop=15px;dl2.style.marginBottom=5px;dl2.style.height=30px;dt2.style.height=30px;dt2.style.fontSize=24px;dt2.style.color=red;dd2.style.fontSize=24px;dd2.style.color=red;/写失业保险1%var dl3=document.createElement(dl);sec.appendChild(dl3);var dt3=document.createElement(dt);dl3.appendChild(dt3);dt3.innerHTML=失业保险 1%;var dd3=document.createElement(dd);dl3.appendChild(dd3);dd3.innerHTML=-0.00;dt3.style.float=left;dd3.style.float=right;dl3.style.marginTop=15px;dl3.style.marginBottom=5px;dl3.style.height=30px;dt3.style.height=30px;dt3.style.fontSize=24px;dt3.style.color=red;dd3.style.fontSize=24px;dd3.style.color=red;/写工伤保险0%var dl4=document.createElement(dl);sec.appendChild(dl4);var dt4=document.createElement(dt);dl4.appendChild(dt4);dt4.innerHTML=工伤保险 0%;var dd4=document.createElement(dd);dl4.appendChild(dd4);dd4.innerHTML=-0.00;dt4.style.float=left;dd4.style.float=right;dl4.style.marginTop=15px;dl4.style.marginBottom=5px;dl4.style.height=30px;dt4.style.height=30px;dt4.style.fontSize=24px;dt4.style.color=red;dd4.style.fontSize=24px;dd4.style.color=red;/写生育保险0%var dl5=document.createElement(dl);sec.appendChild(dl5);var dt5=document.createElement(dt);dl5.appendChild(dt5);dt5.innerHTML=生育保险 0%;var dd5=document.createElement(dd);dl5.appendChild(dd5);dd5.innerHTML=-0.00;dt5.style.float=left;dd5.style.float=right;dl5.style.marginTop=15px;dl5.style.marginBottom=5px;dl5.style.height=30px;dt5.style.height=30px;dt5.style.fontSize=24px;dt5.style.color=red;dd5.style.fontSize=24px;dd5.style.color=red;/写住房公积金8%var dl6=document.createElement(dl);sec.appendChild(dl6);var dt6=document.createElement(dt);dl6.appendChild(dt6);dt6.innerHTML=住房公积金 8%;var dd6=document.createElement(dd);dl6.appendChild(dd6);dd6.innerHTML=-0.00;dt6.style.float=left;dd6.style.float=right;dl6.style.marginTop=15px;dl6.style.marginBottom=5px;dl6.style.height=30px;dt6.style.height=30px;dt6.style.fontSize=24px;dt6.style.color=red;dd6.style.fontSize=24px;dd6.style.color=red;/写分割线var hr=document.createElement(hr);sec.appendChild(hr);hr.style.margin=0;/写计税工资var dl7=document.createElement(dl);sec.appendChild(dl7);var dt7=document.createElement(dt);dl7.appendChild(dt7);dt7.innerHTML=计税工资;var dd7=document.createElement(dd);dl7.appendChild(dd7);dd7.innerHTML=0.00;dt7.style.float=left;dd7.style.float=right;dl7.style.marginTop=15px;dl7.style.marginBottom=5px;dl7.style.height=30px;dt7.style.height=30px;dt7.style.fontSize=24px;dd7.style.fontSize=24px;/写个人所得税var dl8=document.createElement(dl);sec.appendChild(dl8);var dt8=document.createElement(dt);dl8.appendChild(dt8);dt8.innerHTML=个人所得税;var dd8=document.createElement(dd);dl8.appendChild(dd8);dd8.innerHTML=-0.00;dt8.style.float=left;dd8.style.float=right;dl8.style.marginTop=15px;dl8.style.marginBottom=5px;dl8.style.height=30px;dt8.style.height=30px;dt8.style.fontSize=24px;dt8.style.color=red;dd8.style.fontSize=24px;dd8.style.color=red;/写分割线var hr=document.createElement(hr);sec.appendChild(hr);hr.style.margin=0;/写实发工资var dl9=document.createElement(dl);sec.appendChild(dl9);var dt9=document.createElement(dt);dl9.appendChild(dt9);dt9.innerHTML=实发工资;var dd9=document.createElement(dd);dl9.appendChild(dd9);dd9.innerHTML=0.00;dt9.style.float=left;dd9.style.float=right;dl9.style.marginTop=15px;dl9.style.marginBottom=5px;dl9.style.height=30px;dt9.style.height=30px;dt9.style.fontSize=24px;dt9.style.fontWeight=bold;dd9.style.fontSize=24px;dd9.style.fontWeight=bold;/*/写数据交互部分。/填写数据时隐藏五险一金部分。form.onclick=function()sec.style.display=none;/为button添加监听事件button.addEventListener(click,js);/封装一个函数进行计算function js()sec.style.display=block;/从输入框中拿去数值。var n1=input1.value;/alert(n1);var n2=input2.value;var n3=input3.value;/把从输入框中拿来的数据进行过滤（转换为纯数字）n1=parseFloat(n1);n2=parseFloat(n2);n3=parseFloat(n3);/判断输入框中的内容是否合适if(isNaN(n1+n2+n3)alert(输入的工资不符合要求，请输入纯数字！);return;/计算总额。var all=n1+n2+n3;var yanglao=0.08*all;var yiliao = 0.02 * all;var shiye = 0.01 * all;var gongshang = 0 * all;var shengyu = 0 * all;var gongjijin = 0.08 * all;var tongchou = 0;/将计算的五险一金内容写进表格/工资总收入。dd.innerHTML=all.toFixed(2);/计算结果保留2位小数。/养老保险扣除部分。dd1.innerHTML=-+yanglao.toFixed(2);/医疗保险扣除部分。dd2.innerHTML=-+yiliao.toFixed(2);/失业保险扣除部分。dd3.innerHTML=-+shiye.toFixed(2);/工伤保险扣除部分。dd4.innerHTML=-