jquery 的税收计算器（仅限参考）

最新推荐文章于 2023-06-13 19:19:43 发布

GuanJINP

最新推荐文章于 2023-06-13 19:19:43 发布

阅读量1.1k

点赞数

分类专栏： jquery 文章标签： jquery 个税计算器 jquery个税计算器

本文链接：https://blog.csdn.net/weixin_42617075/article/details/82024636

版权

jquery 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

jquery 的税收计算器;(首先你要有jquery.js文件，可以在创建好自己的.js文件),因为这样做能让思路清晰化，

首先是html 代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个税计算器</title>
    <link rel="stylesheet" href="taxation.css">
    <script src="jquery.min.js"></script>
    <script src="taxation.js"></script>
</head>
<body>
<div>
    <input id="gongzi" type="text" class="control" placeholder="工资">
    <input id="jiangjin" type="text" class="control" placeholder="奖金">
    <input id="jixiao" type="text" class="control" placeholder="考勤">
    <button id="btn" class="control" >计&emsp;&emsp;算</button>
</div>
<!--用表格的方式来书写-->
<div id="result">
    <table id="tb">
        <tr>
            <td>总工资</td>
            <td id="zgz">0000</td>
        </tr>
        <tr>
            <td>养老保险8%</td>
            <td id="ylbx" class="kouchu">0000</td>
        </tr>
        <tr>
            <td>公积金8%</td>
            <td id="gjj" class="kouchu">0000</td>
        </tr>
        <tr>
            <td>税前工资(扣除五险一金后)</td>
            <td id="sqgz">0000</td>
        </tr>
        <tr>
            <td>所得税</td>
            <td id="sds" class="kouchu">0000</td>
        </tr>
        <tr>
            <td>税后工资</td>
            <td id="shgz">0000</td>
        </tr>
    </table>
</div>
</body>
</html>

然后是自己的 .js 文件

$(document).ready(function () {
    $("#btn").click(function () {
        var total = $("#gongzi").val() * 1 +
            $("#jiangjin").val() * 1 +
            $("#jixiao").val() * 1;

        var yanglaobaoxian = total * 0.08;
        var gongjijin = total * 0.08;
        var shuiqiangongzi = total - yanglaobaoxian - gongjijin;
        var geshui = calcTax(shuiqiangongzi);
        var shuihougongzi = shuiqiangongzi - geshui;

        // 数字对象的.tofix()方法，四舍五入,括号里面的是(保留n位小数)，结果是一个字符串。
        $("#zgz").text(total.toFixed(2));
        $("#ylbx").text(yanglaobaoxian.toFixed(2));
        $("#gjj").text(gongjijin.toFixed(2));
        $("#sqgz").text(shuiqiangongzi.toFixed(2));
        $("#sds").text(geshui.toFixed(2));
        $("#shgz").text(shuihougongzi.toFixed(2));
        $("#result").slideDown();
    });
})

function salaryChange(){
    var total = $("#gongzi").val()*1+
        $("#jiangjin").val()*1+
        $("#jixiao").val()*1;
    if(total>=1500){
        $("#btn").prop("disabled",false);
    }else{
        $("#btn").prop("disabled",true);
    }
    $("#result").fadeOut();
}

$("#gongzi").on("input",salaryChange);
$("#jiangjin").on("input",salaryChange);
$("#jixiao").on("input",salaryChange);

function calcTax(sqgz){
    if(sqgz<=3500){
        return 0;
    }else{
        var tax = 0;
        var ynse = sqgz - 3500;
        if(ynse<=1500){
            tax = ynse*0.03;
        }else if(ynse<=4500){
            tax = ynse*0.1-105;
        }else if(ynse<=9000){
            tax = ynse*0.2-555;
        }else if(ynse<=35000){
            tax = ynse*0.25-1005;
        }else if(ynse<=55000){
            tax = ynse*0.3-2755;
        }else if(ynse<=80000){
            tax = ynse*0.35-5505;
        }else{
            tax = ynse*0.45-13505;
        }
        return tax;
    }
}
$("#result").hide();

css 样式文件

*{
    box-sizing: border-box;
}
body{
    margin: 0;
    padding: 10px;
}

.control{
    width: 100%;
    height: 40px;
    border-radius: 5px;
    margin: 5px 0;
}
input.control{
    border: solid 1px grey;
    font-size: 18px;
    padding-left: 10px;
}
input.control:hover{
    border: solid 1px skyblue;
}
input.control:focus{
    box-shadow: 0 0 10px 0 skyblue inset;
}
button.control{
    border: none;
    background-color: cyan;
    color: white;
    font-size: 20px;
}

button[disabled]{
    background-color: #ccc;
}

#tb{
    width: 100%;
}

#tb td:nth-of-type(2){
    text-align: right;
    color: red;
}
#tb td:nth-of-type(2):before{
    content: "￥";
}

#tb td.kouchu:before{
    content: "-￥";
}

效果如下：
这里写图片描述

GuanJINP

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
jquery 的税收计算器（仅限参考）

jquery 的税收计算器;(首先你要有jquery.js文件，可以在创建好自己的.js文件),因为这样做能让思路清晰化，首先是html 代码：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;个税计算器&a
复制链接

扫一扫

专栏目录