|
<!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset="UTF-8">
?? ??? ?<title>个人社保计算器-网页版</title>
?? ??? ?<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>
?? ??? ?<!-- 新 Bootstrap 核心 CSS 文件 -->
?? ??? ?<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
?? ??? ?<script>
?? ??? ??? ?function calc() {
?? ??? ??? ??? ?//1.把用户输入的工资拿到
?? ??? ??? ??? ?//jQuery函数
?? ??? ??? ??? ?sal = $("#salary").val();
?? ??? ??? ??? ?//2.把sal转成数字
?? ??? ??? ??? ?salnum = parseInt(sal);
?? ??? ??? ??? ?//3.开始计算
?? ??? ??? ??? ?//3.1养老保险
?? ??? ??? ??? ?ylgr = salnum * 0.08;
?? ??? ??? ??? ?ylgs = salnum * 0.2;
?? ??? ??? ??? ?//3.2医保保险
?? ??? ??? ??? ?ybgr = salnum * 0.02;
?? ??? ??? ??? ?ybgs = salnum * 0.06;
?? ??? ??? ??? ?//3.3失业保险
?? ??? ??? ??? ?sygr = salnum * 0.005;
?? ??? ??? ??? ?sygs = salnum * 0.015;
?? ??? ??? ??? ?//3.4工伤保险
?? ??? ??? ??? ?gsgs = salnum * 0.005;
?? ??? ??? ??? ?//3.5生育保险
?? ??? ??? ??? ?sybx = salnum * 0.008;
?? ??? ??? ??? ?//3.6公积金保险
?? ??? ??? ??? ?gjjgr = salnum * 0.12;
?? ??? ??? ??? ?gjjgs = salnum * 0.12;
?? ??? ??? ??? ?grhj = ylgr + ybgr + sygr + gjjgr;
?? ??? ??? ??? ?gshj = ylgs + ybgs + sygs + gsgs + sybx + gjjgs;
?? ??? ??? ??? ?total = grhj + gshj;
?? ??? ??? ??? ?//3.7
?? ??? ??? ??? ?//4.把计算结果放到表格里
?? ??? ??? ??? ?$("#ylgr").text(ylgr);
?? ??? ??? ??? ?$("#ylgs").text(ylgs);
?? ??? ??? ??? ?$("#ybgr").text(ybgr);
?? ??? ??? ??? ?$("#ybgs").text(ybgs);
?? ??? ??? ??? ?$("#sygr").text(sygr);
?? ??? ??? ??? ?$("#sygs").text(sygs);
?? ??? ??? ??? ?$("#gsgs").text(gsgs);
?? ??? ??? ??? ?$("#sybx").text(sybx);
?? ??? ??? ??? ?$("#gjjgr").text(gjjgr);
?? ??? ??? ??? ?$("#gjjgs").text(gjjgs);
?? ??? ??? ??? ?$("#grhj").text(grhj);
?? ??? ??? ??? ?$("#gshj").text(gshj);
?? ??? ??? ??? ?$("#total").text(total);
?? ??? ??? ?}
?? ??? ?</script>
?? ?</head>
?? ?<body>
?? ??? ?<div class="container text-center">
?? ??? ??? ?<h1>个人社保计算器</h1>
?? ??? ??? ?<table class="table table-bordered">
?? ??? ??? ??? ?<td>工资</td>
?? ??? ??? ??? ?<td colspan="3">
?? ??? ??? ??? ??? ?<input id="salary" class="form-control" placeholder="请输入工资" type="" />
?? ??? ??? ??? ?</td>
?? ??? ??? ??? ?<td>
?? ??? ??? ??? ??? ?<button οnclick="calc()" class="btn btn-danger btn-block">计算</button>
?? ??? ??? ??? ?</td>
?? ??? ??? ??? ?<tr class="bg-primary">
?? ??? ??? ??? ??? ?<td>险种</td>
?? ??? ??? ??? ??? ?<td>个人%</td>
?? ??? ??? ??? ??? ?<td>个人</td>
?? ??? ??? ??? ??? ?<td>公司%</td>
?? ??? ??? ??? ??? ?<td>公司</td>
?? ??? ??? ??? ?</tr>
?? ??? ??? ??? ?<tr>
?? ??? ??? ??? ??? ?<td>养老</td>
?? ??? ??? ??? ??? ?<td>8%</td>
?? ??? ??? ??? ??? ?<td id="ylgr"></td>
?? ??? ??? ??? ??? ?<td>20%</td>
?? ??? ??? ??? ??? ?<td id="ylgs"></td>
?? ??? ??? ??? ?</tr>
?? ??? ??? ??? ?<tr>
?? ??? ??? ??? ??? ?<td>医保</td>
?? ??? ??? ??? ??? ?<td>2%</td>
?? ??? ??? ??? ??? ?<td id="ybgr"></td>
?? ??? ??? ??? ??? ?<td>6%</td>
?? ??? ??? ??? ??? ?<td id="ybgs"></td>
?? ??? ??? ??? ?</tr>
?? ??? ??? ??? ?<tr>
?? ??? ??? ??? ??? ?<td>失业</td>
?? ??? ??? ??? ??? ?<td>0.5%</td>
?? ??? ??? ??? ??? ?<td id="sygr"></td>
?? ??? ??? ??? ??? ?<td>1.5%</td>
?? ??? ??? ??? ??? ?<td id="sygs"></td>
?? ??? ??? ??? ?</tr>
?? ??? ??? ??? ?<tr>
?? ??? ??? ??? ??? ?<td>工伤</td>
?? ??? ??? ??? ??? ?<td></td>
?? ??? ??? ??? ??? ?<td></td>
?? ??? ??? ??? ??? ?<td>0.5%</td>
?? ??? ??? ??? ??? ?<td id="gsgs"></td>
?? ??? ??? ??? ?</tr>
?? ??? ??? ??? ?<tr>
?? ??? ??? ??? ??? ?<td>生育</td>
?? ??? ??? ??? ??? ?<td></td>
?? ??? ??? ??? ??? ?<td></td>
?? ??? ??? ??? ??? ?<td>0.8%</td>
?? ??? ??? ??? ??? ?<td id="sybx"></td>
?? ??? ??? ??? ?</tr>
?? ??? ??? ??? ?<tr>
?? ??? ??? ??? ??? ?<td>公积金</td>
?? ??? ??? ??? ??? ?<td>12%</td>
?? ??? ??? ??? ??? ?<td id="gjjgr"></td>
?? ??? ??? ??? ??? ?<td>12%</td>
?? ??? ??? ??? ??? ?<td id="gjjgs"></td>
?? ??? ??? ??? ?</tr>
?? ??? ??? ??? ?<tr>
?? ??? ??? ??? ??? ?<td>合计</td>
?? ??? ??? ??? ??? ?<td>个人合计</td>
?? ??? ??? ??? ??? ?<td id="grhj"></td>
?? ??? ??? ??? ??? ?<td>公司合计</td>
?? ??? ??? ??? ??? ?<td id="gshj"></td>
?? ??? ??? ??? ?</tr>
?? ??? ??? ??? ?<tr>
?? ??? ??? ??? ??? ?<td>总额</td>
?? ??? ??? ??? ??? ?<td colspan="4" id="total"></td>
?? ??? ??? ??? ?</tr>
?? ??? ??? ?</table>
? ? ? ? ? ? 测试
?? ??? ?</div>
?? ?</body>
</html>
|