使用JS代码编写税收计算器,计算器用于计算每月收入需要缴纳的税额。本是使用最基本的法子进行编写的,主要是帮助大家练习及熟悉JS代码。
整个计算器代码大概分为两大部分:静态的页面部分与动态的数据交互部分。页面部分又包括:计算器名称、收入输入框、计算按钮、各项缴费内容。
计算器的逻辑规则是这样的:点击收入框时显示的纳税金额等隐藏,输入的内容不是数字时弹出提示框,收入不足纳税金额时弹出提示框,收入达到纳税金额时计算器工作并显示出来。
操作方法
(01)先了解下我国的交税规则:个人所得税起征点为3500元,即你的收入扣除五险一金后若大于3500,你就会成为一个纳税人。当然具体的纳税计算是比较复杂的,为了简化计算我在这里定义纳税公式为:个人所缴税=(总收入 - 五险一金 - 3500)×适用税率-速算扣除数。
(02)编写静态页面的计算器名称:e="个税计算器"; //编写计算器名称部分。 var header=teElement("header"); rHTML="个税计算器"; ndChild(header);//定义计算器名称部分的样式。groundColor="blue"; ht="50px"; Align="center"; Size="30px"; Height="50px"; r="white";
(03)编写静态页面的输入框部分://编写第一个输入框并定义其样式var form=teElement("form"); ndChild(form); var input1=teElement("input"); ndChild(input1); ="text"; eholder="基本工资"; h="100%"; ht="40px"; inTop="15px"; Size="30px"; eholder="基本工资/计税"; //编写第二个输入框并定义其样式var input2=teElement("input"); ndChild(input2); ="text"; eholder="绩效工资及工龄工资"; h="100%"; ht="40px"; inTop="15px"; Size="30px"; eholder="绩效工资/计税"; //编写第三个输入框并定义其样式var input3=teElement("input"); ndChild(input3); ="text"; eholder="奖金及其它收入"; h="100%"; ht="40px"; inTop="10px"; Size="30px"; eholder="奖金/计税";
(04)编写计算器的计算按钮://编写计算按钮 var button=teElement("button"); ndChild(button); rHTML="开始计算"; groundColor="lightskyblue"; Align="center"; Size="30px"; ht="50px"; h="100%"; in="10px auto";
(05)编写显示五险一金及缴税部分://定义一个主体区域用于存放主体内容。 var sec=teElement("section"); ndChild(sec); //工资总额部分 var dl=teElement("dl"); ndChild(dl); var dt=teElement("dt"); ndChild(dt); rHTML="工资总额"; var dd=teElement("dd"); ndChild(dd); rHTML="0.00"; t="left"; t="right"; inTop="15px"; inBottom="5px"; ht="30px"; ht="30px"; Size="24px"; Size="24px"; //写分割线 var hr=teElement("hr"); ndChild(hr); in="0"; //写养老部分8% var dl1=teElement("dl"); ndChild(dl1); var dt1=teElement("dt"); ndChild(dt1); rHTML="养老保险 8%"; var dd1=teElement("dd"); ndChild(dd1); rHTML="-0.00"; t="left"; t="right"; inTop="15px"; inBottom="5px"; ht="30px"; ht="30px"; Size="24px"; r="red"; Size="24px"; r="red"; //写医疗 2%部分 var dl2=teElement("dl"); ndChild(dl2); var dt2=teElement("dt"); ndChild(dt2); rHTML="医疗保险 2%"; var dd2=teElement("dd"); ndChild(dd2); rHTML="-0.00"; t="left"; t="right"; inTop="15px"; inBottom="5px"; ht="30px"; ht="30px"; Size="24px"; r="red"; Size="24px"; r="red"; //写失业保险1% var dl3=teElement("dl"); ndChild(dl3); var dt3=teElement("dt"); ndChild(dt3); rHTML="失业保险 1%"; var dd3=teElement("dd"); ndChild(dd3); rHTML="-0.00"; t="left"; t="right"; inTop="15px"; inBottom="5px"; ht="30px"; ht="30px"; Size="24px"; r="red"; Size="24px"; r="red"; //写工伤保险0% var dl4=teElement("dl"); ndChild(dl4); var dt4=teElement("dt"); ndChild(dt4); rHTML="工伤保险 0%"; var dd4=teElement("dd"); ndChild(dd4); rHTML="-0.00"; t="left"; t="right"; inTop="15px"; inBottom="5px"; ht="30px"; ht="30px"; Size="24px"; r="red"; Size="24px"; r="red"; //写生育保险0% var dl5=teElement("dl"); ndChild(dl5); var dt5=teElement("dt"); ndChild(dt5); rHTML="生育保险 0%"; var dd5=teElement("dd"); ndChild(dd5); rHTML="-0.00"; t="left"; t="right"; inTop="15px"; inBottom="5px"; ht="30px"; ht="30px"; Size="24px"; r="red"; Size="24px"; r="red"; //写住房公积金8% var dl6=teElement("dl"); ndChild(dl6); var dt6=teElement("dt"); ndChild(dt6); rHTML="住房公积金 8%"; var dd6=teElement("dd"); ndChild(dd6); rHTML="-0.00"; t="left"; t="right"; inTop="15px"; inBottom="5px"; ht="30px"; ht="30px"; Size="24px"; r="red"; Size="24px"; r="red"; //写分割线 var hr=teElement("hr"); ndChild(hr); in="0"; //写计税工资 var dl7=teElement("dl"); ndChild(dl7); var dt7=teElement("dt"); ndChild(dt7); rHTML="计税工资"; var dd7=teElement("dd"); ndChild(dd7); rHTML="0.00"; t="left"; t="right"; inTop="15px"; inBottom="5px"; ht="30px"; ht="30px"; Size="24px"; Size="24px"; //写个人所得税 var dl8=teElement("dl"); ndChild(dl8); var dt8=teElement("dt"); ndChild(dt8); rHTML="个人所得税"; var dd8=teElement("dd"); ndChild(dd8); rHTML="-0.00"; t="left"; t="right"; inTop="15px"; inBottom="5px"; ht="30px"; ht="30px"; Size="24px"; r="red"; Size="24px"; r="red"; //写分割线 var hr=teElement("hr"); ndChild(hr); in="0"; //写实发工资 var dl9=teElement("dl"); ndChild(dl9); var dt9=teElement("dt"); ndChild(dt9); rHTML="实发工资"; var dd9=teElement("dd"); ndChild(dd9); rHTML="0.00"; t="left"; t="right"; inTop="15px"; inBottom="5px"; ht="30px"; ht="30px"; Size="24px"; Weight="bold"; Size="24px"; Weight="bold";
(06)编写动态交互部分://填写数据时隐藏五险一金部分。 ick=function(){ lay="none"; } //为button添加监听事件,按钮一点击就调用函数进行计算。 ventListener("click",js); //封装一个函数进行计算 function js(){ lay="block"; //从输入框中拿去数值。 var n1=e; var n2=e; var n3=e; //把从输入框中拿来的数据进行过滤(转换为纯数字) n1=parseFloat(n1); n2=parseFloat(n2); n3=parseFloat(n3); //判断输入框中的内容是否合适 if(isNaN(n1+n2+n3)){ alert("输入的工资不符合要求,请输入纯数字!"); return; } //计算总收入及要缴纳的五险一金。all表示总收入。//yanglao表示所缴纳的养老金,yiliao表示缴纳的医疗费,依此类推。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; //将计算的五险一金内容写进表格//计算结果保留2位小数。rHTML=xed(2); //养老保险扣除部分。 rHTML="-"+xed(2); //医疗保险扣除部分。 rHTML="-"+xed(2); //失业保险扣除部分。 rHTML="-"+xed(2); //工伤保险扣除部分。 rHTML="-"+xed(2); //生育保险扣除部分。 rHTML="-"+xed(2); //住房公积金扣除部分。 rHTML="-"+xed(2); //计算计税工资=总额 - 五险一金 - 3500 var jishui=all-0.19*all-3500; rHTML=xed(2); var shifa; var shui; //计算交税工资及实发工资。 if(jishui<=0){ alert("您的收入达不到税收要求。"); } else if(0 < jishui && jishui <= 1500){ shui = 0.03 * jishui - 0; } else if(1500 < jishui && jishui <= 4500){ shui = 0.1 * jishui - 105; } else if(4500 < jishui && jishui <= 9000){ shui = 0.2 * jishui - 555; } else if(9000 < jishui && jishui <= 35000){ shui = 0.25 * jishui - 1005; } else if(35000 < jishui && jishui <= 55000){ shui = 0.3 * jishui - 2755; } else if(55000 < jishui && jishui <= 80000){ shui = 0.35 * jishui - 5505; } else{ shui = 0.45 * jishui - 13505; } rHTML="-"+xed(2); shifa = all - shui - 0.19 * all; rHTML=xed(2); }
(07)运行代码,输入数字进行检验。
特别提示
注意纳税的计算公式要表达正确。