当前位置:趣知科普网>母婴教育>学习交流>

使用JS编写个人税收计算器

学习交流 阅读(8.98K)

使用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="奖金/计税";

使用JS编写个人税收计算器

(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);        }

使用JS编写个人税收计算器 第2张
使用JS编写个人税收计算器 第3张
使用JS编写个人税收计算器 第4张

(07)运行代码,输入数字进行检验。

使用JS编写个人税收计算器 第5张

特别提示

注意纳税的计算公式要表达正确。