PCB javascript实现个税5000计算

个税调整为5000计划实施是今年10月份.而明年一月份全面实施，

马上快到5000个税实施的日子了，当到了个税实施日子时，必定网络会产生热点，这个时候需要就是蹭热点的时候到来时。

全国网友肯定都会关心个税问题。这是必定的，关心哪些问题呢，脑子里面有浮现了网友想要知道的问题点了，

这里罗列网友可能关心的问题：个税如何计算，扣费了哪些内容，扣了多少，改税后与改税前实际个税对比;到手工资差异多少。

这些问题如何帮忙他们解决了，那就是提前准备好，在这里准用javascript写一个税5000的计算工具网页版来解决个税的所有凝问。

由于工作忙的原因，尽量下班后腾出时间，将此博文内容填完整。

一.可能有人会问，为会产生热点呢，

本人也是经历过2011年税改的，作为百度文库众多文档供献者之一，供献了323个文档，通过后台大量数据分析，阅读量，下载量，质量评分

综合统计得出<个人所得税速算表> 文档在当时2011年不管是阅读量，还是下载量，远高于其它文档的，2011是个税改革年，可见热度是如此高

由此产生的积分之高到目前为止都没用完。。如果哪位有需要的下载文库的可以联系我, 这边将免费提供文档下载（QQ:254566449）

二.3500扣税的计算javascript实现代码

这里将3500的个税计算方法列出来，为什么呢，因为5000个税是在此基础上改进的呀。有了对比让人看了更明白.

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

    </body>

    <script type="text/javascript">

        document.title="个税计算器";

        //写头部内容。

        var header=document.createElement("header");

        header.innerHTML="个税计算器";

        document.body.appendChild(header);

        header.style.backgroundColor="blue";

        header.style.height="50px";

        header.style.textAlign="center";

        header.style.fontSize="30px";

        header.style.lineHeight="50px";

        header.style.color="white";

        //写输入框。

        var form=document.createElement("form");

        document.body.appendChild(form);

        var input1=document.createElement("input");

        form.appendChild(input1);

        input1.type="text";

        input1.placeholder="基本工资";

        input1.style.width="100%";

        input1.style.height="40px";

        input1.style.marginTop="15px";

        input1.style.fontSize="30px";

        input1.innerHTML.placeholder="基本工资/计税";

        var input2=document.createElement("input");

        form.appendChild(input2);

        input2.type="text";

        input2.placeholder="绩效工资及工龄工资";

        input2.style.width="100%";

        input2.style.height="40px";

        input2.style.marginTop="15px";

        input2.style.fontSize="30px";

        input2.style.placeholder="绩效工资/计税";

        var input3=document.createElement("input");

        form.appendChild(input3);

        input3.type="text";

        input3.placeholder="奖金及其它收入";

        input3.style.width="100%";

        input3.style.height="40px";

        input3.style.marginTop="10px";

        input3.style.fontSize="30px";

        input3.style.placeholder="奖金/计税";

        //写计算按钮

        var button=document.createElement("button");

        document.body.appendChild(button);

        button.innerHTML="开始计算";

        button.style.backgroundColor="lightskyblue";

        button.style.textAlign="center";

        button.style.fontSize="30px";

        button.style.height="50px";

        button.style.width="100%";

        button.style.margin="10px auto";

//        button.style.margin=""

        //写主题内容

        //定义一个主体区域用于存放主体内容。

        var sec=document.createElement("section");

        document.body.appendChild(sec);

        //工资总额部分

        var dl=document.createElement("dl");

        sec.appendChild(dl);

        var dt=document.createElement("dt");

        dl.appendChild(dt);

        dt.innerHTML="工资总额";

        var dd=document.createElement("dd");

        dl.appendChild(dd);

        dd.innerHTML="0.00";

        dt.style.float="left";

        dd.style.float="right";

        dl.style.marginTop="15px";

        dl.style.marginBottom="5px";

        dl.style.height="30px";

        dt.style.height="30px";

        dt.style.fontSize="24px";

        dd.style.fontSize="24px";

        //写分割线

        var hr=document.createElement("hr");

        sec.appendChild(hr);

        hr.style.margin="0";

        //写养老部分8%

        var dl1=document.createElement("dl");

        sec.appendChild(dl1);

        var dt1=document.createElement("dt");

        dl1.appendChild(dt1);

        dt1.innerHTML="养老保险  8%";

        var dd1=document.createElement("dd");

        dl1.appendChild(dd1);

        dd1.innerHTML="-0.00";

        dt1.style.float="left";

        dd1.style.float="right";

        dl1.style.marginTop="15px";

        dl1.style.marginBottom="5px";

        dl1.style.height="30px";

        dt1.style.height="30px";

        dt1.style.fontSize="24px";

        dt1.style.color="red";

        dd1.style.fontSize="24px";

        dd1.style.color="red";

        //写医疗 2%部分

        var dl2=document.createElement("dl");

        sec.appendChild(dl2);

        var dt2=document.createElement("dt");

        dl2.appendChild(dt2);

        dt2.innerHTML="医疗保险  2%";

        var dd2=document.createElement("dd");

        dl2.appendChild(dd2);

        dd2.innerHTML="-0.00";

        dt2.style.float="left";

        dd2.style.float="right";

        dl2.style.marginTop="15px";

        dl2.style.marginBottom="5px";

        dl2.style.height="30px";

        dt2.style.height="30px";

        dt2.style.fontSize="24px";

        dt2.style.color="red";

        dd2.style.fontSize="24px";

        dd2.style.color="red";

        //写失业保险1%

        var dl3=document.createElement("dl");

        sec.appendChild(dl3);

        var dt3=document.createElement("dt");

        dl3.appendChild(dt3);

        dt3.innerHTML="失业保险  1%";

        var dd3=document.createElement("dd");

        dl3.appendChild(dd3);

        dd3.innerHTML="-0.00";

        dt3.style.float="left";

        dd3.style.float="right";

        dl3.style.marginTop="15px";

        dl3.style.marginBottom="5px";

        dl3.style.height="30px";

        dt3.style.height="30px";

        dt3.style.fontSize="24px";

        dt3.style.color="red";

        dd3.style.fontSize="24px";

        dd3.style.color="red";

        //写工伤保险0%

        var dl4=document.createElement("dl");

        sec.appendChild(dl4);

        var dt4=document.createElement("dt");

        dl4.appendChild(dt4);

        dt4.innerHTML="工伤保险  0%";

        var dd4=document.createElement("dd");

        dl4.appendChild(dd4);

        dd4.innerHTML="-0.00";

        dt4.style.float="left";

        dd4.style.float="right";

        dl4.style.marginTop="15px";

        dl4.style.marginBottom="5px";

        dl4.style.height="30px";

        dt4.style.height="30px";

        dt4.style.fontSize="24px";

        dt4.style.color="red";

        dd4.style.fontSize="24px";

        dd4.style.color="red";

        //写生育保险0%

        var dl5=document.createElement("dl");

        sec.appendChild(dl5);

        var dt5=document.createElement("dt");

        dl5.appendChild(dt5);

        dt5.innerHTML="生育保险  0%";

        var dd5=document.createElement("dd");

        dl5.appendChild(dd5);

        dd5.innerHTML="-0.00";

        dt5.style.float="left";

        dd5.style.float="right";

        dl5.style.marginTop="15px";

        dl5.style.marginBottom="5px";

        dl5.style.height="30px";

        dt5.style.height="30px";

        dt5.style.fontSize="24px";

        dt5.style.color="red";

        dd5.style.fontSize="24px";

        dd5.style.color="red";

        //写住房公积金8%

        var dl6=document.createElement("dl");

        sec.appendChild(dl6);

        var dt6=document.createElement("dt");

        dl6.appendChild(dt6);

        dt6.innerHTML="住房公积金  8%";

        var dd6=document.createElement("dd");

        dl6.appendChild(dd6);

        dd6.innerHTML="-0.00";

        dt6.style.float="left";

        dd6.style.float="right";

        dl6.style.marginTop="15px";

        dl6.style.marginBottom="5px";

        dl6.style.height="30px";

        dt6.style.height="30px";

        dt6.style.fontSize="24px";

        dt6.style.color="red";

        dd6.style.fontSize="24px";

        dd6.style.color="red";

        //写分割线

        var hr=document.createElement("hr");

        sec.appendChild(hr);

        hr.style.margin="0";

        //写计税工资

        var dl7=document.createElement("dl");

        sec.appendChild(dl7);

        var dt7=document.createElement("dt");

        dl7.appendChild(dt7);

        dt7.innerHTML="计税工资";

        var dd7=document.createElement("dd");

        dl7.appendChild(dd7);

        dd7.innerHTML="0.00";

        dt7.style.float="left";

        dd7.style.float="right";

        dl7.style.marginTop="15px";

        dl7.style.marginBottom="5px";

        dl7.style.height="30px";

        dt7.style.height="30px";

        dt7.style.fontSize="24px";

        dd7.style.fontSize="24px";

        //写个人所得税

        var dl8=document.createElement("dl");

        sec.appendChild(dl8);

        var dt8=document.createElement("dt");

        dl8.appendChild(dt8);

        dt8.innerHTML="个人所得税";

        var dd8=document.createElement("dd");

        dl8.appendChild(dd8);

        dd8.innerHTML="-0.00";

        dt8.style.float="left";

        dd8.style.float="right";

        dl8.style.marginTop="15px";

        dl8.style.marginBottom="5px";

        dl8.style.height="30px";

        dt8.style.height="30px";

        dt8.style.fontSize="24px";

        dt8.style.color="red";

        dd8.style.fontSize="24px";

        dd8.style.color="red";

        //写分割线

        var hr=document.createElement("hr");

        sec.appendChild(hr);

        hr.style.margin="0";

        //写实发工资

        var dl9=document.createElement("dl");

        sec.appendChild(dl9);

        var dt9=document.createElement("dt");

        dl9.appendChild(dt9);

        dt9.innerHTML="实发工资";

        var dd9=document.createElement("dd");

        dl9.appendChild(dd9);

        dd9.innerHTML="0.00";

        dt9.style.float="left";

        dd9.style.float="right";

        dl9.style.marginTop="15px";

        dl9.style.marginBottom="5px";

        dl9.style.height="30px";

        dt9.style.height="30px";

        dt9.style.fontSize="24px";

        dt9.style.fontWeight="bold";

        dd9.style.fontSize="24px";

        dd9.style.fontWeight="bold";

/******************************************************************************/

        //写数据交互部分。

        //填写数据时隐藏五险一金部分。

        form.onclick=function(){

            sec.style.display="none";

        }

        //为button添加监听事件

        button.addEventListener("click",js);

        //封装一个函数进行计算

        function js(){

            sec.style.display="block";

            //从输入框中拿去数值。

            var n1=input1.value;

//            alert(n1);

            var n2=input2.value;

            var n3=input3.value;

            //把从输入框中拿来的数据进行过滤（转换为纯数字）

            n1=parseFloat(n1);

            n2=parseFloat(n2);

            n3=parseFloat(n3);

            //判断输入框中的内容是否合适

            if(isNaN(n1+n2+n3)){

                alert("输入的工资不符合要求，请输入纯数字！");

                return;

            }

            //计算总额。

            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;

        //将计算的五险一金内容写进表格

        //工资总收入。

        dd.innerHTML=all.toFixed(2);

        //计算结果保留2位小数。

        //养老保险扣除部分。

        dd1.innerHTML="-"+yanglao.toFixed(2);

        //医疗保险扣除部分。

        dd2.innerHTML="-"+yiliao.toFixed(2);

        //失业保险扣除部分。

        dd3.innerHTML="-"+shiye.toFixed(2);

        //工伤保险扣除部分。

        dd4.innerHTML="-"+gongshang.toFixed(2);

        //生育保险扣除部分。

        dd5.innerHTML="-"+shengyu.toFixed(2);

        //住房公积金扣除部分。

        dd6.innerHTML="-"+gongjijin.toFixed(2);

        //计算计税工资=总额 - 五险一金 - 3500

        var jishui=all-0.19*all-3500;

        dd7.innerHTML=jishui.toFixed(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;

        }

        dd8.innerHTML="-"+shui.toFixed(2);

        shifa = all - shui - 0.19 * all;

        dd9.innerHTML=shifa.toFixed(2);

        }

    </script>

</html>

三.5000扣税的计算javascript实现代码

js代码 :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <meta http-equiv="X-UA-Compatible" content="IE=emulateIE7" />

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <meta charset="utf-8">

        <link rel="stylesheet" href="./common/css/sapar.css" />

        <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>

        <title>最新版个税计算器</title>

    </head>

    <body >

        <div id="saper-container">

            <div><h1 style="font-size: 24px;text-align: center;color: #053cfb;">最新版个税计算器(起征点5000)</h1> </div>

            <div id="saper-bd">

                <div class="subfiled clearfix">

                    <h2>税前工资信息录入</h2>

                </div>

                <div class="subfiled-content">

                    <form class="saper-form">

                        <div class="kv-item clearfix">

                            <label>税前工资：</label>

                            <div class="kv-item-content">

                                <input type="text" placeholder="税前工资" v-model="gongz">

                            </div>

                        </div>

                        <div class="kv-item clearfix">

                            <label>五险一金：</label>

                            <div class="kv-item-content">

                                <input type="text" placeholder="五险一金" v-model="wuxianyijin">

                            </div>

                        </div>

                    </form>

                </div>

                <div style="clear: both;">

                <div style="float: left;width: 50%;">

                    <div class="subfiled clearfix" style="border: 1px solid #C1D3DE;">

                        <h2>个税5000计算结果</h2>

                    </div>

                    <div class="subfiled-content" style="border: 1px solid #C1D3DE;">

                        <form class="saper-form">

                            <div class="kv-item clearfix">

                                <label>应纳税所得额：</label>

                                <div class="kv-item-content">

                                    <input type="text" placeholder="应纳税所得额" v-model="gongz1">

                                </div>

                            </div>

                            <div class="kv-item clearfix">

                                <label>应纳税额：</label>

                                <div class="kv-item-content">

                                    <input type="text" placeholder="应纳税额" v-model="jishuiCalc1">

                                </div>

                            </div>

                            <div class="kv-item clearfix">

                                <label>税后工资：</label>

                                <div class="kv-item-content">

                                    <input type="text" placeholder="税后工资" v-model="gongz2" >

                                </div>

                            </div>

                        </form>

                    </div>

                </div>

                <div style="float: left;width: 50%;">

                    <div class="subfiled clearfix" style="border: 1px solid #C1D3DE;">

                        <h2>个税3500计算结果</h2>

                    </div>

                    <div class="subfiled-content" style="border: 1px solid #C1D3DE;">

                        <form class="saper-form">

                            <div class="kv-item clearfix">

                                <label>应纳税所得额：</label>

                                <div class="kv-item-content">

                                    <input type="text" placeholder="应纳税所得额" v-model="gongz11" >

                                </div>

                            </div>

                            <div class="kv-item clearfix">

                                <label>应纳税额：</label>

                                <div class="kv-item-content">

                                    <input type="text" placeholder="应纳税额" v-model="jishuiCalc11">

                                </div>

                            </div>

                            <div class="kv-item clearfix">

                                <label>税后工资：</label>

                                <div class="kv-item-content">

                                    <input type="text" placeholder="税后工资" v-model="gongz22" >

                                </div>

                            </div>

                        </form>

                    </div>

                </div>

                </div>

                    <div>

                        <h1 style='color: red;font-size: 18px;'>新个税执行：每个月个税少交:{{(gongz2-gongz22).toFixed(2)}}元,一年下来可以节省{{((gongz2-gongz22)*12).toFixed(2)}}元哦!!!</h1>

                    </div>

                <div class="subfiled clearfix">

                    <h2>起征点5000个税计算详解</h2>

                </div>

                <div id="calcDetail1">

                    <h1>5000起征点  税前工资10,000元 五险一金0元 缴纳个税290元</h1>

                    <div>税前工资 10,000</div>

                    <div>五险一金 0</div>

                    <div> 起征点 5,000</div>

                    <br>

                    <div>应纳税所得额 = 税前工资 －五险一金 － 起征点</div>

                    <div>= 10,000 －0 － 5,000</div>

                    <div>= 5,000</div>

                    <br>

                    <div>应纳税所得额 5,000，参照税率表，得到税率 10%，速算扣除数 210</div>

                    <!--表格开始-->

                    <div class="table">

                        <!--表格具体内容-->

                        <div class="table-box">

                            <table>

                                <thead>

                                    <tr>

                                        <th>级数</th>

                                        <th>应纳税所得额</th>

                                        <th>税率</th>

                                        <th>速算扣除数</th>

                                    </tr>

                                </thead>

                                <tbody>

                                    <tr>

                                        <td> 1</td>

                                        <td>(0＜X≤3,000)</td>

                                        <td>3% </td>

                                        <td>0</td>

                                    </tr>

                                    <tr>

                                        <td>2</td>

                                        <td>(3,000＜X≤12,000)</td>

                                        <td>10%</td>

                                        <td>210</td>

                                    </tr>

                                    <tr>

                                        <td>3</td>

                                        <td>(12,000＜X≤25,000)</td>

                                        <td>20%</td>

                                        <td>1410</td>

                                    </tr>

                                    <tr>

                                        <td> 4</td>

                                        <td>(25,000＜X≤35,000)</td>

                                        <td>25%</td>

                                        <td>2,660</td>

                                    </tr>

                                    <tr>

                                        <td>5</td>

                                        <td>(35,000＜X≤55,000)</td>

                                        <td>30%</td>

                                        <td>4,410</td>

                                    </tr>

                                    <tr>

                                        <td>6</td>

                                        <td>(55,000＜X≤80,000)</td>

                                        <td>35%</td>

                                        <td>7,160</td>

                                    </tr>

                                    <tr>

                                        <td>7</td>

                                        <td>(X＞80,000)</td>

                                        <td>45%</td>

                                        <td>15,160</td>

                                    </tr>

                                </tbody>

                            </table>

                        </div>

                    </div>

                    <div>应纳税额 = 应纳税所得额 × 税率 － 速算扣除数</div>

                    <div>= 5,000 × 10% － 210</div>

                    <div>= 290</div>

                    <br>

                    <div>税后工资 = 税前工资 － 五险一金 － 应纳个税</div>

                    <div>= 10,000 － 0 － 290</div>

                    <div>= 9,710</div>

                </div>

                <div class="subfiled clearfix">

                    <h2>起征点3500个税计算详解</h2>

                </div>

                <div id="calcDetail2">

                    <h1>3500起征点  税前工资10,000元 五险一金0元 缴纳个税745元</h1>

                    <div>税前工资 10,000</div>

                    <div>五险一金 0</div>

                    <div> 起征点 3,500</div>

                    <br>

                    <div>应纳税所得额 = 税前工资 －五险一金 － 起征点</div>

                    <div>= 10,000 －0 － 3,500</div>

                    <div>= 6,500</div>

                    <br>

                    <div>应纳税所得额 6,500，参照税率表，得到税率 20%，速算扣除数 555</div>

                    <!--表格开始-->

                    <div class="table">

                        <!--表格具体内容-->

                        <div class="table-box">

                            <table>

                                <thead>

                                    <tr>

                                        <th>级数</th>

                                        <th>应纳税所得额</th>

                                        <th>税率</th>

                                        <th>速算扣除数</th>

                                    </tr>

                                </thead>

                                <tr>

                                    <td> 1</td>

                                    <td>(0＜X≤1,500)</td>

                                    <td>3% </td>

                                    <td>0</td>

                                </tr>

                                <tr>

                                    <td>2</td>

                                    <td>(1,500＜X≤4,500)</td>

                                    <td>10%</td>

                                    <td>105</td>

                                </tr>

                                <tr>

                                    <td>3</td>

                                    <td>(4,500＜X≤9,000)</td>

                                    <td>20%</td>

                                    <td>555</td>

                                </tr>

                                <tr>

                                    <td> 4</td>

                                    <td>(9,000＜X≤35,000)</td>

                                    <td>25%</td>

                                    <td>1,005</td>

                                </tr>

                                <tr>

                                    <td>5</td>

                                    <td>(35,000＜X≤55,000)</td>

                                    <td>30%</td>

                                    <td>2,755</td>

                                </tr>

                                <tr>

                                    <td>6</td>

                                    <td>(55,000＜X≤80,000)</td>

                                    <td>35%</td>

                                    <td>5,505</td>

                                </tr>

                                <tr>

                                    <td>7</td>

                                    <td>(X＞80,000)</td>

                                    <td>45%</td>

                                    <td>13,505</td>

                                </tr>

                                </tbody>

                            </table>

                        </div>

                    </div>

                    <div>应纳税额 = 应纳税所得额 × 税率 － 速算扣除数</div>

                    <div>= 6,500 × 20% － 555</div>

                    <div>= 745</div>

                    <br>

                    <div>税后工资 = 税前工资 － 五险一金 － 应纳个税</div>

                    <div>= 10,000 － 0 － 745</div>

                    <div>= 9,255</div>

                </div>

            </div>

            <div id="saper-ft"></div>

            <div><h1 style="font-size: 16px;text-align: center;color: #053cfb;">EDS工程开发团队出品 2018</h1> </div>

        </div>

    <script type="text/javascript">

            var vm = new Vue({

                el: '#saper-container',

                data: {

                    gongz: 10000, //税前工资(扣社保前) 12000

                    wuxianyijin: 0, //五险一金

                    gongz1: 0, //应纳税所得额 12000-2000-5000

                    gongz2: 0, //实发工资

                    gongz11: 0, //应纳税所得额 12000-2000-3500

                    gongz22: 0, //实发工资

                    isReadOnly : true,

                },

                methods: {},

                computed: {

                    jishuiCalc1: function() {

                        var jishuied = this.gongz - this.wuxianyijin - 5000;

                        jishuied = jishuied > 0 ? jishuied : 0;

                        this.gongz1 = jishuied;

                        var jishui = this.gongz1;

                        var shuilu = 0;

                        var xujian = 0;

                        //计算交税工资及实发工资。

                        if(0 < jishui && jishui <= 2910) {

                            shuilu = 0.03;

                            xujian = 0;

                        } else if(2910 < jishui && jishui <= 11010) {

                            shuilu = 0.1;

                            xujian = 210;

                        } else if(11010 < jishui && jishui <= 21410) {

                            shuilu = 0.2;

                            xujian = 1410;

                        } else if(21410 < jishui && jishui <= 28910) {

                            shuilu = 0.25;

                            xujian = 2660;

                        } else if(28910 < jishui && jishui <= 42910) {

                            shuilu = 0.30;

                            xujian = 4410;

                        } else if(42910 < jishui && jishui <= 59160) {

                            shuilu = 0.35;

                            xujian = 7160;

                        } else if(jishui > 59160) {

                            shuilu = 0.45;

                            xujian = 15160;

                        }

                        jishuied = (shuilu * jishui - xujian).toFixed(2);

                        this.gongz2 = (this.gongz - this.wuxianyijin - jishuied).toFixed(2);

                        return jishuied;

                    },

                    jishuiCalc11: function() {

                        var jishuied = this.gongz - this.wuxianyijin - 3500;

                        jishuied = jishuied > 0 ? jishuied : 0;

                        this.gongz11 = jishuied;

                        var jishui = this.gongz11;

                        var shuilu = 0;

                        var xujian = 0;

                        //计算交税工资及实发工资。

                        if(0 < jishui && jishui <= 1455) {

                            shuilu = 0.03;

                            xujian = 0;

                        } else if(1455 < jishui && jishui <= 4155) {

                            shuilu = 0.1;

                            xujian = 105;

                        } else if(4155 < jishui && jishui <= 7755) {

                            shuilu = 0.2;

                            xujian = 555;

                        } else if(7755 < jishui && jishui <= 27255) {

                            shuilu = 0.25;

                            xujian = 1005;

                        } else if(27255 < jishui && jishui <= 41255) {

                            shuilu = 0.30;

                            xujian = 2755;

                        } else if(41255 < jishui && jishui <= 57505) {

                            shuilu = 0.35;

                            xujian = 5505;

                        } else if(jishui > 57505) {

                            shuilu = 0.45;

                            xujian = 13505;

                        }

                        jishuied = (shuilu * jishui - xujian).toFixed(2);

                        this.gongz22 = (this.gongz - this.wuxianyijin - jishuied).toFixed(2);

                        return jishuied;

                    }

                }

            });

        </script>

    </body>

    <!-- <script type="text/javascript"> -->

    <!-- $('#pagin').pagination(100,{ -->

    <!-- callback: function(page){ -->

    <!-- alert(page);     -->

    <!-- }, -->

    <!-- display_msg: true, -->

    <!-- setPageNo: true -->

    <!-- }); -->

    <!--</script>-->

</html>

css代码:

/** Alerts**/

/*clear*/

.clearfix:after {

  content: ".";

  display: block;

  height:;

  clear: both;

  overflow: hidden;

}

.clearfix {

  display: inline-block;

}

*html .clearfix {

  height: 1%;

}

.clearfix {

  display: block;

}

.brand-warning {

  color: #f0ad4e;

}

.brand-danger {

  color: #d9534f;

}

/*! normalize.css v3.0.2 | MIT License | git.io/normalize */

html {

  font-family: sans-serif;

  -ms-text-size-adjust: 100%;

  -webkit-text-size-adjust: 100%;

}

body {

  margin:;

}

article,

aside,

details,

figcaption,

figure,

footer,

header,

hgroup,

main,

menu,

nav,

section,

summary {

  display: block;

}

audio,

canvas,

progress,

video {

  display: inline-block;

  vertical-align: baseline;

}

audio:not([controls]) {

  display: none;

  height:;

}

[hidden],

template {

  display: none;

}

a {

  background-color: transparent;

}

a:active,

a:hover {

  outline:;

}

abbr[title] {

  border-bottom: 1px dotted;

}

b,

strong {

  font-weight: bold;

}

dfn {

  font-style: italic;

}

h1 {

  font-size: 2em;

  margin: 0.67em 0;

}

mark {

  background: #ff0;

  color: #000;

}

small {

  font-size: 80%;

}

sub,

sup {

  font-size: 75%;

  line-height:;

  position: relative;

  vertical-align: baseline;

}

sup {

  top: -0.5em;

}

sub {

  bottom: -0.25em;

}

img {

  border:;

}

svg:not(:root) {

  overflow: hidden;

}

figure {

  margin: 1em 40px;

}

hr {

  -moz-box-sizing: content-box;

  box-sizing: content-box;

  height:;

}

pre {

  overflow: auto;

}

code,

kbd,

pre,

samp {

  font-family: monospace, monospace;

  font-size: 1em;

}

button,

input,

optgroup,

select,

textarea {

  color: inherit;

  font: inherit;

  margin:;

}

button {

  overflow: visible;

}

button,

select {

  text-transform: none;

}

button,

html input[type="button"],

input[type="reset"],

input[type="submit"] {

  -webkit-appearance: button;

  cursor: pointer;

}

button[disabled],

html input[disabled] {

  cursor: default;

}

button::-moz-focus-inner,

input::-moz-focus-inner {

  border:;

  padding:;

}

input {

  line-height: normal;

}

input[type="checkbox"],

input[type="radio"] {

  box-sizing: border-box;

  padding:;

}

input[type="number"]::-webkit-inner-spin-button,

input[type="number"]::-webkit-outer-spin-button {

  height: auto;

}

input[type="search"] {

  -webkit-appearance: textfield;

  -moz-box-sizing: content-box;

  -webkit-box-sizing: content-box;

  box-sizing: content-box;

}

input[type="search"]::-webkit-search-cancel-button,

input[type="search"]::-webkit-search-decoration {

  -webkit-appearance: none;

}

fieldset {

  border: 1px solid #c0c0c0;

  margin: 0 2px;

  padding: 0.35em 0.625em 0.75em;

}

legend {

  border:;

  padding:;

}

textarea {

  overflow: auto;

}

optgroup {

  font-weight: bold;

}

table {

  border-collapse: collapse;

  border-spacing:;

}

td,

th {

  padding:;

}

html {

  font-size: 10px;

  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

}

body {

  font-family:tahoma, arial, 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', '宋体', sans-serif;

  font-size: 14px;

  line-height: 1.42857143;

  color: #333333;

  background-color: #ffffff;

}

input,

button,

select,

textarea {

  font-family: inherit;

  font-size: inherit;

  line-height: inherit;

}

a {

  color: #337ab7;

  text-decoration: none;

}

a:hover,

a:focus {

  color: #23527c;

  text-decoration: underline;

}

figure {

  margin:;

}

img {

  vertical-align: middle;

}

.img-rounded {

  border-radius: 6px;

}

.img-circle {

  border-radius: 50%;

}

hr {

  margin-top: 20px;

  margin-bottom: 20px

  border: 0;

  border-top: 1px solid #eeeeee;

}

.sr-only {

  position: absolute;

  width: 1px;

  height: 1px;

  margin: -1px;

  padding:;

  overflow: hidden;

  clip: rect(0, 0, 0, 0);

  border:;

}

.sr-only-focusable:active,

.sr-only-focusable:focus {

  position: static;

  width: auto;

  height: auto;

  margin:;

  overflow: visible;

  clip: auto;

}

.impInfo {

  color: #fc0000;

}

/*css reset*/

html,

body,

div,

span,

object,

iframe,

h1,

h2,

h3,

h4,

h5,

h6,

p,

blockquote,

pre,

a,

abbr,

acronym,

address,

code,

del,

dfn,

em,

img,

q,

dl,

dt,

dd,

ol,

ul,

li,

fieldset,

form,

label,

legend,

table,

caption,

tbody,

tfoot,

thead,

tr,

th,

td,

i {

  margin:;

  padding:;

  border:;

  font-weight: inherit;

  font-style: inherit;

  font-size: 100%;

  font-family: inherit;

  vertical-align: baseline;

}

body {

  line-height: 1.5;

}

table {

  border-collapse: collapse;

  border-spacing:;

}

caption,

th,

td,

b,

strong {

  text-align: left;

  font-weight: normal;

}

table,

td,

th {

  vertical-align: middle;

}

blockquote:before,

blockquote:after,

q:before,

q:after {

  content: "";

}

blockquote,

q {

  quotes: "" "";

}

a img {

  border: none;

}

em,

cite {

  font-style: normal;

}

body {

  background: #fff;

  font: 12px/1.5 tahoma, arial, 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', '宋体', sans-serif;;

  color: #000;

}

h1,

h2,

h3,

h4,

h5,

h6 {

  font-weight: normal;

  color: #111;

}

a {

  text-decoration: none;

  cursor: pointer;

}

dl,

dt,

dd,

ol,

ul,

li {

  list-style: none;

}

.clearfix {

  display: inline-block;

  display: block;

}

.center-block {

  display: block;

  margin-left: auto;

  margin-right: auto;

}

.pull-right {

  float: right !important;

}

.pull-left {

  float: left !important;

}

.hide {

  display: none !important;

}

.show {

  display: block !important;

}

.invisible {

  visibility: hidden;

}

.text-hide {

  font: 0/0 a;

  color: transparent;

  text-shadow: none;

  background-color: transparent;

  border:;

}

.hidden {

  display: none !important;

  visibility: hidden !important;

}

.affix {

  position: fixed;

}

.sapar-btn {

  float: left;

  padding: 0 10px;

  text-align: center;

  border-radius: 2px;

  color: #808080;

  font-size: 14px;

  height: 31px;

  line-height: 31px;

  border: 1px solid #6AB96E;

  text-decoration: none;

  background: url("../images/righttitlebig.png") repeat-x scroll 0% 0% transparent;

}

.sapar-btn:hover {

  text-decoration: none;

}

.sapar-btn:focus {

  text-decoration: none;

}

.sapar-btn.sapar-btn-recom {

  color: #FFF;

  background: none repeat scroll 0% 0% #6AB96E;

}

.saper-form .buttons {

  padding-left: 80px;

}

.buttons .sapar-btn {

  margin-right: 5px;

}

/*====================================

  表单样式

  ===================================*/

.kv-item {

  margin-bottom: 10px;

  font-size: 12px;

}

.kv-item label,

.kv-item .kv-item-label {

  position: relative;

  float: left;

  padding-left: 7px;

  width: 7em;

  height: 30px;

  line-height: 30px;

  text-align: right;

}

.kv-item-content {

  float: left;

}

.kv-item .input {

  float: left;

  width: 100%;

  margin-top: 5px;

}

.kv-item .input:first-child {

  margin-top:;

}

/*输入框，文本域， 密码输入框样式*/

.kv-item input[type=text],

.kv-item textarea,

.kv-item input[type=password],

.kv-item input[type=file],

.kv-item .file {

  width: 150px;

  height: 28px;

  border-width: 1px;

  border-style: solid;

  border-left-color: #c5c5c5;

  border-top-color: #c5c5c5;

  border-right-color: #e0e0e0;

  border-bottom-color: #e0e0e0;

  *line-height: 28px;

  outline: none;

  /* background:url(../img/skin_/inputbg.png);*/

  padding: 0 10px;

}

.kv-item input[type=text].error-input,

.kv-item textarea.error-input,

.kv-item input[type=password].error-input {

  border: 1px solid #e60000;

  background: #fff2f4;

}

.kv-item textarea {

  height: 80px;

  overflow-y: auto;

  resize: none;

  background: none;

  padding: 5px 10px;

}

.kv-item select {

  width: 271px;

  height: 30px;

}

/*表单中的radio框以及checkbox框的样式*/

.kv-item .choose {

  line-height: 30px;

  margin-right: 10px;

}

.kv-item .choose input[type="checkbox"],

.kv-item .choose input[type="radio"] {

  position: relative;

  top: 2px;

  *top: 1px;

}

/*下拉框样式*/

.iselect-wrapper {

  position: relative;

  width: 244px;

  height: 28px;

  padding: 0 20px 0 5px;

  line-height: 28px;

  border-width: 1px;

  border-style: solid;

  border-left-color: #c5c5c5;

  border-top-color: #c5c5c5;

  border-right-color: #e0e0e0;

  border-bottom-color: #e0e0e0;

  background: url("../images/select_normal.png") no-repeat right center #ffffff;

}

.iselect-wrapper:hover {

  background: url("../images/select_hover.png") no-repeat right center #ffffff;

}

.iselect-wrapper .iselect {

  position: absolute;

  top: -2px;

  left: -1px;

  opacity:;

  filter: alpha(opacity=0);

  outline: 0 none;

  z-index:;

}

/*一段区域数值输入（比如时间段，数字段等）*/

.kv-item.interval input[type=text],

.kv-item .interval input[type=text] {

  float: left;

  width: 100px;

}

.kv-item .division {

  float: left;

  margin: 0 5px;

  color: #666;

}

/*表单中的提示信息*/

.kv-item-tip {

  float: left;

  margin-left: 20px;

  color: #a5a5a5;

  height: 30px;

  line-height: 30px;

}

.kv-item-tip .tipText {

  margin-top: 1px;

}

.kv-item-tip.error {

  color: #fc0000;

}

.kv-item-tip.success {

  color: #5cb85c;

}

.kv-item-tip.warn {

  color: #f0ad4e;

}

/*.kv-item-tip{margin-left:397px;*margin-left:0;}*/

.kv-item-tip .ue-icon {

  margin: 2px 8px 0 5px;

  *margin-left: 2px;

}

.kv-item-tip .ue-state-highlight .tipText {

  color: #FAAB00;

}

.kv-item .file {

  position: relative;

  line-height: 30px;

}

.kv-item .file input[type=file] {

  position: absolute;

  right: 0px;

  z-index:;

  width: 72px;

  height: 35px;

  opacity:;

  filter: alpha(opacity=0);

}

.kv-item .file input[type=button] {

  position: absolute;

  right:;

  top:;

  width: 72px;

  z-index:;

  height: 28px;

  border-top: none;

  border-bottom: none;

  border-radius:;

  border-right: none;

}

select,

textarea,

input[type=text],

input[type=password],

input[type=datetime],

input[type=datetime-local],

input[type=date],

input[type=month],

input[type=time],

input[type=week],

input[type=number],

input[type=email],

input[type=url],

input[type=search],

input[type=tel],

input[type=color] {

  transition: all .5s ease;

  -moz-transition: all .5s ease;

  -webkit-transition: all .5s ease;

  -ms-transition: all .5s ease;

}

select:focus,

textarea:focus,

input[type=text]:focus,

input[type=password]:focus,

input[type=datetime]:focus,

input[type=datetime-local]:focus,

input[type=date]:focus,

input[type=month]:focus,

input[type=time]:focus,

input[type=week]:focus,

input[type=number]:focus,

input[type=email]:focus,

input[type=url]:focus,

input[type=search]:focus,

input[type=tel]:focus,

input[type=color]:focus {

  background-color: #fafffe;

  border-color: #3bb4f2;

  outline:;

  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 5px rgba(59, 180, 242, 0.3);

  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 5px rgba(59, 180, 242, 0.3);

}

.time-select-wrap .time-select {

  float: left;

  position: relative;

}

.time-select-wrap .time-select input[type=text] {

  padding: 0 16px 0 8px;

  width: 102px;

  height: 28px;

}

.time-select-wrap .time-select .date-icon {

  position: absolute;

  right: 6px;

  top: 1px;

  width: 16px;

  height: 28px;

  background: url("../images/dateico.png") no-repeat center center;

  cursor: pointer;

}

.time-select-wrap .line {

  float: left;

  margin: 3px 2px 0;

}

.subfiled {

  position: inherit;

  line-height: 33px;

  /* background: url("../images/righttitlebig.png") repeat-x scroll 0% 0% transparent; */

  background: green;

  border: 1px solid #C1D3DE;

  overflow: visible;

}

.subfiled h2 {

  float: left;

  margin-left: 7px;

  padding-left: 22px;

  font-weight: bold;

  font-size: 14px;

  /* color: #000; */

  color: white;

  background: url("../images/titleico.png") no-repeat scroll left center transparent;

}

.subfiled h2.tabs-list {

  top: -1px;

  left: -1px;

  z-index:;

  position: absolute;

  background: none repeat scroll 0% 0% transparent;

  margin-left: 0px;

  padding: 0px;

}

.subfiled h2.tabs-list li {

  width: 98px;

  border-left: 1px solid transparent;

  border-right: 1px solid transparent;

  float: left;

  padding-left: 8px;

}

.subfiled h2.tabs-list li.current {

  border-left: 1px solid #C1D3DE;

  border-right: 1px solid #C1D3DE;

  background: url("../images/titlebg01.png") repeat-x scroll 0% 0% transparent;

}

.subfiled h2.tabs-list li.current a {

  background: url("../images/titleico.png") no-repeat scroll left center transparent;

  font-weight: bold;

}

.subfiled h2.tabs-list li a {

  display: block;

  line-height: 35px;

  padding-left: 22px;

  color: #000;

  font-size: 14px;

  font-weight: normal;

}

.subfiled h2.tabs-list li a:hover,

.subfiled h2.tabs-list li a:focus {

  text-decoration: none;

}

.subfiled .more {

  font-size: 12px;

  float: right;

  margin-right: 12px;

  color: #000;

  width: 33px;

  background: url("../images/more.png") no-repeat scroll right center transparent;

}

.subfiled-style2 {

  position: relative;

  padding:;

  height: 26px;

  border-bottom: 2px solid #e5e5e5;

  line-height: 26px;

}

.subfiled-style2 h2 {

  position: absolute;

  padding: 0 10px;

  border-bottom: 2px solid #59bc5e;

  color: #3C3C3C;

  font-weight: bold;

  font-size: 14px;

}

.subfiled-style2 .more {

  font-size: 12px;

  float: right;

  margin-right: 12px;

  color: #000;

  width: 33px;

  background: url("../images/more.png") no-repeat scroll right center transparent;

}

.subfiled-content {

  padding: 10px 0 0 0;

}

.table .table-operate {

  padding-left: 15px;

  height: 37px;

  line-height: 37px;

  background: url("../images/toolbarbg.png") repeat-x;

  border: 1px solid #c1d3de;

  border-bottom: none;

}

.table .table-operate a {

  float: left;

  color: #000;

  margin-right: 20px;

  padding-left: 20px;

}

.table .table-operate a:hover,

.table .table-operate a:focus {

  text-decoration: none;

}

.table .table-operate a.add {

  background: url("../images/addico.png") no-repeat left 10px;

}

.table .table-operate a.del {

  background: url("../images/delico.png") no-repeat left 10px;

}

.table .table-operate a.edit {

  background: url("../images/edtico.png") no-repeat left 10px;

}

.table .table-operate a.count {

  background: url("../images/tjico.png") no-repeat left 10px;

}

.table .table-operate a.check {

  background: url("../images/bookico.png") no-repeat left 10px;

}

.table table {

  width: 100%;

  border: 1px solid #c1d3de;

}

.table table thead tr th {

  height: 35px;

  line-height: 35px;

  border-bottom: 1px solid #c1d3de;

  background: url("../images/tablelistbg.png") repeat-x;

  font-weight: bold;

  padding-left: 10px;

}

.table table tbody tr td {

  border-left: 1px dotted #c7c7c7;

  line-height: 30px;

  padding-left: 9px;

}

.table table tbody tr td:first-child {

  border-left: none;

}

.table table tbody tr td.even {

  background: #EFF6FA;

}

.table table tbody tr:hover {

  background: #DCF0FC !important;

}

/*====================================

  分页样式

  ===================================*/

.pagination a {

  text-decoration: none;

  border: solid 1px;

}

.pagination .pxofy {

  float: left;

  margin-left: 5px;

  height: 25px;

  *padding-top: 1px;

}

.pagination a,

.pagination span {

  display: block;

  float: left;

  line-height: 24px;

  padding: 0 9px;

  border-radius: 2px;

  margin-right: 5px;

  font-family: Arial, Helvetica, sans-serif !important;

}

.pagination .current {

  cursor: default;

  border: solid 1px ;

}

.pagination .prev,

.pagination .next {

  *line-height: 22px;

}

/*分页*/

.pagination a {

  color: #000000;

  border-color: #8EB2D2;

  background: #eaf4fa;

}

.pagination a:hover {

  color: #023054;

  border-color: #8EB2D2;

  background: #B8DFFB;

}

.pagination .current {

  color: #fff;

  border-color: #4ea052;

  background: #5ebc62;

}

.pagination .current.prev,

.pagination .current.next {

  color: #B9B9B9;

  border-color: #D3D3D3;

  background: #fff;

}

.pagination .pxofy {

  color: #023054;

}

.pagination {

  margin-top: 10px;

  padding: 0 10px;

}

.pagination .pxofy {

  float: left;

  color: #6c6c6c;

}

.pagination .pagin-list {

  float: right;

}

.pagination .goto {

  float: right;

  margin-left: 10px;

}

.pagination .goto .text {

  padding:;

}

.pagination .goto input[type=text] {

  float: left;

  width: 25px;

  height: 22px;

  border: 1px solid #8EB2D2;

  outline: none;

  text-align: center;

}

.ui-dialog-panel {

  z-index:;

  position: absolute;

  left: 50%;

  top: 50%;

  /*padding:4px;*/

  border-radius: 5px;

}

.ui-dialog {

  padding-top: 40px;

  /*border:1px solid #BBBBBB;*/

  border-radius: 1px;

  background: #fff;

}

/***** æ ‡é¢˜åŒºåŸŸ *****/

.ui-dialog-hd {

  position: absolute;

  left:;

  top:;

  right:;

  height: 41px;

  color: #FFFFFF;

  font-size: 16px;

  background: url("../images/topcenter.png");

}

.ui-dialog-hd .ui-dialog-close {

  position: absolute;

  top: 10px;

  right:;

  color: #fff;

  font-size: 16px;

}

.ui-dialog-hd .ui-dialog-close i {

  float: left;

  width: 20px;

  height: 20px;

  background: url("../images/close3.png");

}

.ui-dialog-hd .ui-dialog-close:hover i {

  background: url("../images/close4.png");

}

/*** æ ‡é¢˜æ–‡å—åŒºåŸŸ ***/

.ui-dialog-hd h6 {

  height: 40px;

  left:;

  right: 35px;

  text-indent: 18px;

  line-height: 40px;

  *line-height: 40px;

  color: #fff;

  font-size: 14px;

}

/***** å¼¹çª—æŒ‰é’®  *****/

.ui-dialog-ft {

  position: absolute;

  bottom: 5px;

  left: 5px;

  right: 5px;

  height: 39px;

  text-align: right;

  border-top: 1px solid #F0F0F0;

  background: #F9F9F9;

}

.ui-dialog-ft button {

  margin: 6px 15px 0 -10px;

}

/***** ç‰¹æ®Šä¿¡æ¯å¼¹å‡ºæ¡† *****/

.ui-dialog-icon {

  float: left;

  width: 78px;

  height: 78px;

  margin: 25px 20px 25px 38px;

  background-image: url("../images/dico.png");

}

/*.ui-dialog-confirm .ui-dialog-icon{background-position:0 0;}

.ui-dialog-warning .ui-dialog-icon{background-position:-48px 0;}

.ui-dialog-success .ui-dialog-icon{background-position:-96px 0;}

.ui-dialog-error .ui-dialog-icon{background-position:-144px 0;}*/

/*** ç‰¹æ®Šä¿¡æ¯æ˜¾ç¤º ***/

.ui-dialog-text {

  float: left;

  display: table-cell;

  vertical-align: middle;

  width: 250px;

  height: 100px;

}

.ui-dialog-text .dialog-text,

.ui-dialog-text .patch {

  display: inline-block;

  vertical-align: middle;

  font-size: 16px;

  color: #4d4d4d;

  font-weight: bold;

}

.ui-dialog-text .dialog-content {

  margin: 40px 0 10px 0;

  font-size: 18px;

}

.ui-dialog-text .tips {

  color: #8f8f8f;

  font-size: 13px;

}

.ui-dialog-text .patch {

  width:;

  height: 100%;

}

/***** å¼¹çª—é‡Œæœ‰è¡¨å• *****/

.ui-dialog-panel .formDialog {

  display: none;

  padding: 20px 15px;

}

.ui-dialog-panel .formDialog input[type=text] {

  width: 220px;

}

.dialog-hd-lc {

  position: absolute;

  width: 15px;

  height: 41px;

  background: url("../images/lefttop.png");

  left: -15px;

  top:;

}

.dialog-hd-rc {

  position: absolute;

  width: 15px;

  height: 41px;

  background: url("../images/righttop.png");

  right: -15px;

  top:;

}

.ui-dialog-leftYY {

  position: absolute;

  width: 15px;

  top: 41px;

  bottom: 15px;

  left: -15px;

  background: url("../images/centerleft.png");

}

.ui-dialog-rightYY {

  position: absolute;

  width: 15px;

  top: 41px;

  bottom: 15px;

  right: -15px;

  background: url("../images/centerright.png");

}

.ui-dialog-bottomCenter {

  position: absolute;

  height: 19px;

  bottom: -13px;

  left: -11px;

  right: -11px;

  background: url("../images/downcenter.png");

}

.ui-dialog-bottomLeft {

  position: absolute;

  width: 15px;

  height: 19px;

  bottom: -4px;

  left: -15px;

  background: url("../images/centerleft.png");

}

.ui-dialog-bottomRight {

  position: absolute;

  width: 15px;

  height: 19px;

  bottom: -4px;

  right: -15px;

  background: url("../images/centerright.png");

}

.alert {

  padding: 10px;

  margin-bottom: 20px;

  border: 1px solid transparent;

  border-radius: 4px;

}

.alert h4 {

  margin-top:;

  color: inherit;

}

.alert .alert-link {

  font-weight: bold;

}

.alert > p,

.alert > ul {

  margin-bottom:;

}

.alert > p + p {

  margin-top: 5px;

}

.alert-dismissable,

.alert-dismissible {

  padding-right: 30px;

}

.alert-dismissable .close,

.alert-dismissible .close {

  position: relative;

  top: -2px;

  right: -21px;

  color: inherit;

}

.alert-success {

  background-color: #dff0d8;

  border-color: #d6e9c6;

  color: #3c763d;

}

.alert-success hr {

  border-top-color: #c9e2b3;

}

.alert-success .alert-link {

  color: #2b542c;

}

.alert-info {

  background-color: #d9edf7;

  border-color: #bce8f1;

  color: #31708f;

}

.alert-info hr {

  border-top-color: #a6e1ec;

}

.alert-info .alert-link {

  color: #245269;

}

.alert-warning {

  background-color: #fcf8e3;

  border-color: #faebcc;

  color: #8a6d3b;

}

.alert-warning hr {

  border-top-color: #f7e1b5;

}

.alert-warning .alert-link {

  color: #66512c;

}

.alert-danger {

  background-color: #f2dede;

  border-color: #ebccd1;

  color: #a94442;

}

.alert-danger hr {

  border-top-color: #e4b9c0;

}

.alert-danger .alert-link {

  color: #843534;

}

.tab-container {

  font-family: '微软雅黑';

}

.tab-container .tab {

  overflow: hidden;

  background: #e7f2f9;

}

.tab-container .tab a {

  display: block;

  padding: 10px 20px;

  float: left;

  text-decoration: none;

  color: #333;

  transition: background 0.2s ease-in;

}

.tab-container .tab a:hover {

  background: #3B9FE1;

  color: #fff;

  text-decoration: none;

}

.tab-container .tab a.current {

  background: #3B9FE1;

  color: #fff;

  text-decoration: none;

}

.tab-container .tab-content {

  overflow: hidden;

  padding: 10px 0;

}

.tab-container .tab-content .tab-content-item {

  display: none;

}

.tooltip {

  position: absolute;

  z-index:;

  display: block;

  visibility: visible;

  font-family: tahoma, arial, 'Hiragino Sans GB', '宋体', sans-serif;

  font-size: 12px;

  font-weight: normal;

  line-height: 1.4;

  opacity:;

  filter: alpha(opacity=0);

}

.tooltip.in {

  opacity: 0.9;

  filter: alpha(opacity=90);

}

.tooltip.top {

  margin-top: -3px;

  padding: 5px 0;

}

.tooltip.right {

  margin-left: 3px;

  padding: 0 5px;

}

.tooltip.bottom {

  margin-top: 3px;

  padding: 5px 0;

}

.tooltip.left {

  margin-left: -3px;

  padding: 0 5px;

}

.tooltip-inner {

  max-width: 200px;

  padding: 3px 8px;

  color: #ffffff;

  text-align: center;

  text-decoration: none;

  background-color: #000000;

  border-radius: 4px;

}

.tooltip-arrow {

  position: absolute;

  width:;

  height:;

  border-color: transparent;

  border-style: solid;

}

.tooltip.top .tooltip-arrow {

  bottom:;

  left: 50%;

  margin-left: -5px;

  border-width: 5px 5px 0;

  border-top-color: #000000;

}

.tooltip.top-left .tooltip-arrow {

  bottom:;

  right: 5px;

  margin-bottom: -5px;

  border-width: 5px 5px 0;

  border-top-color: #000000;

}

.tooltip.top-right .tooltip-arrow {

  bottom:;

  left: 5px;

  margin-bottom: -5px;

  border-width: 5px 5px 0;

  border-top-color: #000000;

}

.tooltip.right .tooltip-arrow {

  top: 50%;

  left:;

  margin-top: -5px;

  border-width: 5px 5px 5px 0;

  border-right-color: #000000;

}

.tooltip.left .tooltip-arrow {

  top: 50%;

  right:;

  margin-top: -5px;

  border-width: 5px 0 5px 5px;

  border-left-color: #000000;

}

.tooltip.bottom .tooltip-arrow {

  top:;

  left: 50%;

  margin-left: -5px;

  border-width: 0 5px 5px;

  border-bottom-color: #000000;

}

.tooltip.bottom-left .tooltip-arrow {

  top:;

  right: 5px;

  margin-top: -5px;

  border-width: 0 5px 5px;

  border-bottom-color: #000000;

}

.tooltip.bottom-right .tooltip-arrow {

  top:;

  left: 5px;

  margin-top: -5px;

  border-width: 0 5px 5px;

  border-bottom-color: #000000;

}

.popover {

  position: absolute;

  top:;

  left:;

  z-index:;

  display: none;

  max-width: 276px;

  padding: 1px;

  font-family: tahoma, arial, 'Hiragino Sans GB', '宋体', sans-serif;

  font-size: 14px;

  font-weight: normal;

  line-height: 1.42857143;

  text-align: left;

  background-color: #ffffff;

  background-clip: padding-box;

  border: 1px solid #cccccc;

  border: 1px solid rgba(0, 0, 0, 0.2);

  border-radius: 6px;

  box-shadow: 0 5px 10px #ddd;

  white-space: normal;

}

.popover.top {

  margin-top: -10px;

}

.popover.right {

  margin-left: 10px;

}

.popover.bottom {

  margin-top: 10px;

}

.popover.left {

  margin-left: -10px;

}

.popover-title {

  margin:;

  padding: 8px 14px;

  font-size: 14px;

  background-color: #f7f7f7;

  border-bottom: 1px solid #ebebeb;

  border-radius: 5px 5px 0 0;

}

.popover-content {

  padding: 9px 14px;

}

.popover > .arrow,

.popover > .arrow:after {

  position: absolute;

  display: block;

  width:;

  height:;

  border-color: transparent;

  border-style: solid;

}

.popover > .arrow {

  border-width: 11px;

}

.popover > .arrow:after {

  border-width: 10px;

  content: "";

}

.popover.top > .arrow {

  left: 50%;

  margin-left: -11px;

  border-bottom-width:;

  border-top-color: #999999;

  border-top-color: rgba(0, 0, 0, 0.25);

  bottom: -11px;

}

.popover.top > .arrow:after {

  content: " ";

  bottom: 1px;

  margin-left: -10px;

  border-bottom-width:;

  border-top-color: #ffffff;

}

.popover.right > .arrow {

  top: 50%;

  left: -11px;

  margin-top: -11px;

  border-left-width:;

  border-right-color: #999999;

  border-right-color: rgba(0, 0, 0, 0.25);

}

.popover.right > .arrow:after {

  content: " ";

  left: 1px;

  bottom: -10px;

  border-left-width:;

  border-right-color: #ffffff;

}

.popover.bottom > .arrow {

  left: 50%;

  margin-left: -11px;

  border-top-width:;

  border-bottom-color: #999999;

  border-bottom-color: rgba(0, 0, 0, 0.25);

  top: -11px;

}

.popover.bottom > .arrow:after {

  content: " ";

  top: 1px;

  margin-left: -10px;

  border-top-width:;

  border-bottom-color: #ffffff;

}

.popover.left > .arrow {

  top: 50%;

  right: -11px;

  margin-top: -11px;

  border-right-width:;

  border-left-color: #999999;

  border-left-color: rgba(0, 0, 0, 0.25);

}

.popover.left > .arrow:after {

  content: " ";

  right: 1px;

  border-right-width:;

  border-left-color: #ffffff;

  bottom: -10px;

}

.steps {

  height: 46px;

  border-bottom: 2px solid #E6E6E6;

  position: relative;

}

/*宽度根据100%步数*100%*/

.steps ol li {

  display: inline;

  float: left;

  height: 46px;

  line-height: 46px;

  font-size: 16px;

  font-weight: bold;

  color: #999;

  font-family: "微软雅黑", "华文细黑", "黑体", arial;

}

.steps ol li i {

  display: inline-block;

  margin-left: 70px;

  margin-right: 5px;

  width: 24px;

  height: 24px;

  text-align: center;

  font-style: normal;

  line-height: 24px;

  font-size: 14px;

  font-weight: bold;

  color: #FFF;

  background: url("../images/ico-circle2.png") no-repeat scroll 0px 0px transparent;

}

.steps ol li {

  line-height: 46px;

  font-size: 16px;

  font-weight: bold;

  color: #999;

  font-family: "微软雅黑", "华文细黑", "黑体", arial;

}

.steps ol li.active {

  color: #3E3E3E;

  border-bottom: 2px solid #59BC5E;

}

.steps ol li.active i {

  background-image: url("../images/ico-circle1.png");

}

*html {

  background-image: url(about:blank);

  background-attachment: fixed;

}

/** common **/

.xubox_shade,

.xubox_layer {

  position: fixed;

  _position: absolute;

}

.xubox_shade {

  top:;

  left:;

  width: 100%;

  height: 100%;

}

.xubox_layer {

  top: 150px;

  left: 50%;

  height: auto;

  width: 310px;

  margin-left: -155px;

}

.xubox_border,

.xubox_title,

.xubox_title i,

.xubox_page,

.xubox_iframe,

.xubox_title em,

.xubox_close,

.xubox_msgico,

.xubox_moves {

  position: absolute;

}

.xubox_border {

  border-radius: 5px;

}

.xubox_title {

  left:;

  top:;

}

.xubox_main {

  position: relative;

  height: 100%;

  _float: left;

}

.xubox_page {

  top:;

  left:;

}

.xubox_load {

  background: url("../images/layer/xubox_loading0.gif") #ffffff center center no-repeat;

}

.xubox_loading {

  display: block;

  float: left;

  text-decoration: none;

  color: #FFF;

  _float: none;

}

.xulayer_png32 {

  background: url("../images/layer/xubox_ico0.png") no-repeat;

}

.xubox_moves {

  border: 3px solid #666;

  cursor: move;

  background-color: rgba(255, 255, 255, 0.3);

  background-color: #fff\9;

  filter: alpha(opacity=50);

}

.xubox_msgico {

  width: 32px;

  height: 32px;

  top: 52px;

  left: 15px;

  background: url("../images/layer/xubox_ico0.png") no-repeat;

}

.xubox_text {

  padding-left: 55px;

  float: left;

  line-height: 25px;

  word-break: break-all;

  padding-right: 20px;

  overflow: hidden;

  font-size: 14px;

}

.xubox_msgtype0 {

  background-position: -91px -38px;

}

.xubox_msgtype1 {

  background-position: -128px -38px;

}

.xubox_msgtype2 {

  background-position: -163px -38px;

}

.xubox_msgtype3 {

  background-position: -91px -75px;

}

.xubox_msgtype4 {

  background-position: -163px -75px;

}

.xubox_msgtype5 {

  background-position: -163px -112px;

}

.xubox_msgtype6 {

  background-position: -163px -148px;

}

.xubox_msgtype7 {

  background-position: -128px -75px;

}

.xubox_msgtype8 {

  background-position: -91px -6px;

}

.xubox_msgtype9 {

  background-position: -129px -6px;

}

.xubox_msgtype10 {

  background-position: -163px -6px;

}

.xubox_msgtype11 {

  background-position: -206px -6px;

}

.xubox_msgtype12 {

  background-position: -206px -44px;

}

.xubox_msgtype13 {

  background-position: -206px -81px;

}

.xubox_msgtype14 {

  background-position: -206px -122px;

}

.xubox_msgtype15 {

  background-position: -206px -157px;

}

.xubox_loading_0 {

  width: 60px;

  height: 24px;

  background: url("../images/layer/xubox_loading0.gif") no-repeat;

}

.xubox_loading_1 {

  width: 37px;

  height: 37px;

  background: url("../images/layer/xubox_loading1.gif") no-repeat;

}

.xubox_loading_2,

.xubox_msgtype16 {

  width: 32px;

  height: 32px;

  background: url("../images/layer/xubox_loading2.gif") no-repeat;

}

.xubox_loading_3 {

  width: 126px;

  height: 22px;

  background: url("../images/layer/xubox_loading3.gif") no-repeat;

}

.xubox_setwin {

  position: absolute;

  right: 10px;

  *right:;

  top: 10px;

  font-size:;

}

.xubox_setwin a {

  position: relative;

  display: inline-block;

  *display: inline;

  *zoom:;

  vertical-align: top;

  width: 14px;

  height: 14px;

  margin-left: 10px;

  font-size: 12px;

  _overflow: hidden;

}

.xubox_setwin .xubox_min cite {

  position: absolute;

  width: 14px;

  height: 2px;

  left:;

  top: 50%;

  margin-top: -1px;

  background-color: #919191;

  cursor: pointer;

  _overflow: hidden;

}

.xubox_setwin .xubox_min:hover cite {

  background-color: #2D93CA;

}

.xubox_setwin .xubox_max {

  background-position: -6px -189px;

}

.xubox_setwin .xubox_max:hover {

  background-position: -6px -206px;

}

.xubox_setwin .xubox_maxmin {

  background-position: -29px -189px;

}

.xubox_setwin .xubox_maxmin:hover {

  background-position: -29px -206px;

}

.xubox_setwin .xubox_close0 {

  width: 14px;

  height: 14px;

  background-position: -31px -7px;

  cursor: pointer;

}

.xubox_setwin .xubox_close0:hover {

  background-position: -51px -7px;

}

.xubox_setwin .xubox_close1 {

  position: absolute;

  right: -28px;

  top: -28px;

  width: 30px;

  height: 30px;

  margin-left:;

  background-position: -60px -195px;

  *right: -18px;

  _right: -15px;

  _top: -23px;

  _width: 14px;

  _height: 14px;

  _background-position: -31px -7px;

}

.xubox_setwin .xubox_close1:hover {

  background-position: -91px -195px;

  _background-position: -51px -7px;

}

.xubox_title {

  width: 100%;

  height: 35px;

  line-height: 35px;

  border-bottom: 1px solid #D5D5D5;

  background: url("../images/layer/xubox_title0.png") #ebebeb repeat-x;

  font-size: 14px;

  color: #333;

}

.xubox_title em {

  height: 20px;

  line-height: 20px;

  width: 60%;

  top: 7px;

  left: 10px;

  font-style: normal;

  text-overflow: ellipsis;

  overflow: hidden;

  white-space: nowrap;

}

.xubox_botton a {

  position: absolute;

  bottom: 10px;

  left: 50%;

  background: url("../images/layer/xubox_ico0.png") repeat;

  text-decoration: none;

  color: #FFF;

  font-size: 14px;

  text-align: center;

  font-weight: bold;

  overflow: hidden;

}

.xubox_botton a:hover {

  text-decoration: none;

  color: #FFF;

}

.xubox_botton .xubox_botton1 {

  width: 79px;

  height: 32px;

  line-height: 32px;

  margin-left: -39px;

  background-position: -6px -34px;

}

.xubox_botton1:hover {

  background-position: -6px -72px;

}

.xubox_botton .xubox_botton2 {

  margin-left: -76px;

  width: 71px;

  height: 29px;

  line-height: 29px;

  background-position: -5px -114px;

}

.xubox_botton2:hover {

  background-position: -5px -146px;

}

.xubox_botton .xubox_botton3 {

  width: 71px;

  height: 29px;

  line-height: 29px;

  margin-left: 10px;

  background-position: -81px -114px;

}

.xubox_botton3:hover {

  background-position: -81px -146px;

}

.xubox_tips {

  position: relative;

  line-height: 20px;

  min-width: 12px;

  padding: 3px 30px 3px 10px;

  font-size: 12px;

  _float: left;

  border-radius: 3px;

  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);

}

.xubox_tips i.layerTipsG {

  position: absolute;

  width:;

  height:;

  border-width: 8px;

  border-color: transparent;

  border-style: dashed;

  *overflow: hidden;

}

.xubox_tips i.layerTipsT,

.xubox_tips i.layerTipsB {

  left: 5px;

  border-right-style: solid;

}

.xubox_tips i.layerTipsT {

  bottom: -8px;

}

.xubox_tips i.layerTipsB {

  top: -8px;

}

.xubox_tips i.layerTipsR,

.xubox_tips i.layerTipsL {

  top: 1px;

  border-bottom-style: solid;

}

.xubox_tips i.layerTipsR {

  left: -8px;

}

.xubox_tips i.layerTipsL {

  right: -8px;

}

/*# sourceMappingURL=sapar.css.map */

四.个税5000计算器Web

1.Web地址 (手机支持不太好)

http://pcbren.cn/5000/

2.Web计算器截图

五.Excel 个税5000计算器(简洁公式版)

http://pcbren.cn/ShareFiles/个税起征点5000计算公式.rar

PCB javascript实现个税5000计算的更多相关文章

void in javascript是一个指定要计算表达式但不返回值的运算符
void in javascript是一个指定要计算表达式但不返回值的运算符.void运算符使用格式如下:1.javascript:void(表达式)2.javascript:void表达式表达式是要 ...
超千个节点OpenStack私有云案例（1）：CERN 5000+ 计算节点私有云
CERN:欧洲核子研究组织本文根据以下几篇文章整理而来: https://www.openstack.org/summit/tokyo-2015/videos/presentation/unveil ...
JavaScript实例技巧精选(12)—计算星座与属相
>>点击这里下载完整html源码<< 这是截图: 核心代码如下: <SCRIPT LANGUAGE="JavaScript"> <!-- ...
Javascript实例技巧精选(8)—计算当月剩余天数
>>点击这里下载完整html源码<< 截图如下: 利用Javascript在网页上计算当前月份的剩余天数,相应代码如下: <script language="J ...
JavaScript 变量、类型与计算
变量类型变量计算变量题目: JavaScript 中使用typeof能得到的有哪些类型? ``` 1.1 变量类型 (1).js中的数据类型:字符串.数字.布尔.数组.对象.Null.Undef ...
使用JavaScript ES6的新特性计算Fibonacci（非波拉契数列）
程序员面试系列 Java面试系列-webapp文件夹和WebContent文件夹的区别? 程序员面试系列:Spring MVC能响应HTTP请求的原因? Java程序员面试系列-什么是Java Mar ...
javascript中矩形的碰撞检测---- 计算碰撞部分的面积
今天在做一个拖拽改变元素排序的东西的时候,在做被拖动元素同时碰撞到两个元素时,究竟应该与哪个元素交换位置的问题上,纠结到崩溃,实在是想不到别的办法去做了,只能去想办法计算碰撞的面积. 这应该不是最合适 ...
JavaScript由单价、数量计算总价
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
JavaScript实例技巧精选(13)—计算在网页上的停留时间
>>点击这里下载完整html源码<< 这是截图: 核心代码如下: <SCRIPT LANGUAGE="JAVASCRIPT"> <!-- ...

随机推荐

洛谷——P1176 路径计数2
P1176 路径计数2 题目描述一个N \times NN×N的网格,你一开始在(1,1)(1,1),即左上角.每次只能移动到下方相邻的格子或者右方相邻的格子,问到达(N,N)(N,N),即右下角有 ...
Python基础之生成器、迭代器
一.字符串格式化进阶 Python的字符串格式化有两种方式: 百分号方式.format方式,由于百分号的方式相对来说比较老,在社区里讨论format方式有望取代百分号方式,下面我们分别介绍一下这两种方 ...
[luoguP2890] [USACO07OPEN]便宜的回文Cheapest Palindrome（DP）
传送门 f[i][j] 表示区间 i 到 j 变为回文串所需最小费用 1.s[i] == s[j] f[i][j] = f[i + 1][j - 1] 2.s[i] != s[j] f[i][j] = ...
bzoj——2982: combination
2982: combination Time Limit: 1 Sec Memory Limit: 128 MBSubmit: 611 Solved: 368[Submit][Status][Di ...
Ubuntu-14.04. sh .py腳本双击無法執行问题的解决方法
Ubuntu-14.04中默认文件用gedit文本打开,而不是BT5里面的默认双击打开四个选择,例如以下图(这是配置完毕后的结果,就不换BT5系统了): 直接文本打开,尽管非常安全.实际生产中肯定是不 ...
[Vue @Component] Pass Vue Render Functions as Props for Powerful Patterns
Render functions open up a world of customization and control by using pure JavaScript rather than V ...
QQ加群组件-iPhone、Android、网页上加入QQ群
iPhone代码: - (BOOL)joinGroup:(NSString *)groupUin key:(NSString *)key{ NSString *urlStr = [NSString s ...
cocos2D（七）---- CCScene
CCScene普通情况是游戏里面的根节点.称之为"场景",执行游戏时须要通过CCDirector启动第一个场景. 当然,游戏略微复杂一点的话.可能会包括非常多个场景,这就涉及到场景 ...
Swift 中枚举
Swift 中枚举高级用法及实践字数11017 阅读479 评论0 喜欢20 title: "Swift 中枚举高级用法及实践"date: 2015-11-20tags: [AP ...
云上kafka和自建kafka对比
说起Kafka,许多使用者对它是又爱又恨.Kafka是一种分布式的.基于发布/订阅的消息系统,其极致体验让人欲罢不能,但操心的运维.复杂的安全策略.可靠性易用性的缺失.算不上极致的性能发挥.并不丰富的 ...

PCB javascript实现个税5000计算

PCB javascript实现个税5000计算的更多相关文章

随机推荐

热门专题