使用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); }
(07)執行程式碼,輸入數字進行檢驗。
特別提示
注意納稅的計算公式要表達正確。
- 文章版權屬於文章作者所有,轉載請註明 https://miaozhigu.com/zh-tw/jy/jiaoliu/qyrz4y.html