master

分支 (1)

管理

管理

master

titwangyh
/
bootstraptest.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Bootstrap表格</title>
        <!-- 在线引用Bootstrap -->

        <!-- 新 Bootstrap 核心 CSS 文件 -->
        <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

        <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
        <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

        <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
        <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

        <script>
            function calc(){
                // alert("hello");
                sal = document.getElementById('salary').value; //获取文本框的值
                salnum = parseInt(sal);

                oldPerson = salnum * 0.08;
                oldCompany = salnum * 0.2;
                document.getElementById("oldPerson").innerText=oldPerson;
                document.getElementById("oldCompany").innerText=oldCompany;

                healthPerson = salnum * 0.02;
                healthCompany = salnum * 0.06;
                document.getElementById("healthPerson").innerText=healthPerson;
                document.getElementById("healthCompany").innerText=healthCompany;

                unemployed = salnum * 0.005;
                employee = salnum * 0.015;
                document.getElementById("unemployed").innerText=unemployed;
                document.getElementById("employee").innerText=employee;

                hurt = salnum * 0.005;
                document.getElementById("hurt").innerText=hurt;

                baby = salnum * 0.008;
                document.getElementById("baby").innerText=baby;

                houseP = salnum * 0.12;
                houseC = salnum * 0.12;
                document.getElementById("houseP").innerText=houseP;
                document.getElementById("houseC").innerText=houseC;

                p = oldPerson+healthPerson+unemployed+houseP;
                c = oldCompany+healthCompany+employee+hurt+baby+houseC;
                document.getElementById("person").innerText=p;
                document.getElementById("company").innerText=c;

                t = oldPerson+healthPerson+unemployed+houseP+oldCompany+healthCompany+employee+hurt+baby+houseC;
                document.getElementById("total").innerText=t;
            }
        </script>

    </head>

    <body>
        <div class="container">

            <h2 class="text-center">社保计算软件-Web版本</h2>

            <table class="table table-bordered text-center">
                <tr>
                    <td>工资</td>
                    <td colspan="3">
                        <input class="form-control" id="salary" type="text" placeholder="用户输入">
                    </td>
                    <td>
                        <button onclick="calc()" class="btn btn-info btn-block">计算</button>
                    </td>
                </tr>

                <tr class="bg-primary">
                    <td>保险种类</td>
                    <td>个人%</td>
                    <td>个人</td>
                    <td>公司%</td>
                    <td>公司</td>
                </tr>

                <tr >
                    <td >养老</td>
                    <td>8%</td>
                    <td id="oldPerson"></td>
                    <td>20%</td>
                    <td id="oldCompany"></td>
                </tr>
                <tr >
                    <td>医疗</td>
                    <td>2%</td>
                    <td id="healthPerson"></td>
                    <td>6%</td>
                    <td id="healthCompany"></td>
                </tr>
                <tr >
                    <td>失业</td>
                    <td>0.5%</td>
                    <td id="unemployed"></td>
                    <td>1.5%</td>
                    <td id="employee"></td>
                </tr>
                <tr >
                    <td>工伤</td>
                    <td>-</td>
                    <td>-</td>
                    <td>0.5%</td>
                    <td id="hurt"></td>
                </tr>
                <tr >
                    <td>生育</td>
                    <td>-</td>
                    <td>-</td>
                    <td>0.8%</td>
                    <td id="baby"></td>
                </tr>
                <tr >
                    <td>公积金</td>
                    <td>12%</td>
                    <td id="houseP"></td>
                    <td>12%</td>
                    <td id="houseC"></td>
                </tr>

                <tr >
                    <td>合计</td>
                    <td>个人合计</td>
                    <td id="person"></td>
                    <td>公司合计</td>
                    <td id="company"></td>
                </tr>

                <tr>
                    <td>总额</td>
                    <td id="total" colspan="4"></td>
                </tr>

            </table>

            <div class="text-center" id="bottomDiv">
                <span>开发者:王耀辉</span>
            </div>

        </div>

    </body>
</html>