使用JS編寫個人税收計算器

學習交流
關注：6.57K次

使用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); }