Untitled

mail@pastecode.io avatar
unknown
html
3 years ago
9.4 kB
1
Indexable
Never

<html>

  <meta charset="UTF-8">
  <title>居民个人综合所得预扣预缴税款计算器</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <!-- <script src="js/jquery-3.3.1.min.js"></script> -->
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
        crossorigin="anonymous">

  <body style="padding: 10px;">
  <div id="app" class="container">
      <h4 style="text-align: center">(2019)个人综合所得预扣预缴税款计算器</h4>
      <div style="height:3em;line-height:3em;color:#888;"><span class="label label-danger" style="font-size: 20px;">输入数据后自动计算</span></div>
      <div>
          <div class="input-group">
              <span class="input-group-addon">税前工资月薪:</span>
              <input oninput="gogogo(this);" id="sallery-input" type="text" class="form-control" placeholder="例如15000"
                     aria-describedby="basic-addon1">
          </div>
          <div style="height:1em;line-height:1em;"></div>
          <div class="input-group">
              <span class="input-group-addon">公积金比例%:</span>
              <input oninput="gogogo(this);" id="gjj-input" type="text" class="form-control" placeholder="例如7" value="7"
                     aria-describedby="basic-addon1">
          </div>
          <div style="height:1em;line-height:1em;"></div>
          <div class="input-group">
              <span class="input-group-addon">专项扣除总和:</span>
              <input oninput="gogogo(this);" id="diff-input" type="text" class="form-control" placeholder="例如1500" value="0"
                     aria-describedby="basic-addon1">
          </div>
      </div>
      <div style="height:1em;line-height:1em;"></div>
      <div id="result1" class="well" style="display:none;">
      </div>
      <div id="result2" class="well" style="display:none;">
          <span style="white-space:normal;" class="label label-danger">注意,由于缴费基数每年会持续发生变化,计算结果和实际值会有差异!!</span>
      </div>
      <div id="result3" class="row" style="display:none;margin-left: 0;">
          <div style="float:left;width:50%;">
              <span class="label label-primary">每月缴税</span>
              <ul id="tax-list" class="list-group col-sm-12" style="margin-top: 20px;"></ul>
          </div>
          <div style="margin-left:50%;">
              <span class="label label-primary">每月税后</span>
              <ul id="tax-after-list" class="list-group col-sm-12" style="margin-top: 20px;"></ul>
          </div>
      </div>
      <table class="table table-hover table-striped" cellspacing="0">
          <caption>个人所得税预扣率表一(居民个人工资、薪金所得预扣预缴适用)</caption>
          <thead>
          <tr>
              <th>级数</th>
              <th>累计预扣预缴应纳税所得额</th>
              <th>预扣率(%)</th>
              <th>速算扣除数</th>
          </tr>
          </thead>
          <tbody>
          <tr>
              <td class="jishu">1</td>
              <td class="shuiYes">不超过36,000元的部分</td>
              <td class="taxRate">3</td>
              <td class="kcsText">0</td>
          </tr>
          <tr>
              <td class="jishu">2</td>
              <td class="shuiYes">超过36,000元至144,000元的部分</td>
              <td class="taxRate">10</td>
              <td class="kcsText">2520</td>
          </tr>
          <tr>
              <td class="jishu">3</td>
              <td class="shuiYes">超过144,000元至300,000元的部分</td>
              <td class="taxRate">20</td>
              <td class="kcsText">16920</td>
          </tr>
          <tr>
              <td class="jishu">4</td>
              <td class="shuiYes">超过300,000元至420,000元的部分</td>
              <td class="taxRate">25</td>
              <td class="kcsText">31920</td>
          </tr>
          <tr>
              <td class="jishu">5</td>
              <td class="shuiYes">超过420,000元至660,000元的部分</td>
              <td class="taxRate">30</td>
              <td class="kcsText">52920</td>
          </tr>
          <tr>
              <td class="jishu">6</td>
              <td class="shuiYes">超过660,000元至960,000元的部分</td>
              <td class="taxRate">35</td>
              <td class="kcsText">85920</td>
          </tr>
          <tr>
              <td class="jishu">7</td>
              <td class="shuiYes">超过960,000元的部分</td>
              <td class="taxRate">45</td>
              <td class="kcsText">181920</td>
          </tr>
          </tbody>
      </table>
  </div>
  <script>
      function getPercent(remain) {
          if (remain <= 36000) {
              return [0, 0.03];
          } else if (remain > 36000 && remain <= 144000) {
              return [2520, 0.1];
          } else if (remain > 144000 && remain <= 300000) {
              return [16920, 0.2];
          } else if (remain > 300000 && remain <= 420000) {
              return [31920, 0.25];
          } else if (remain > 420000 && remain <= 660000) {
              return [52920, 0.3];
          } else if (remain > 660000 && remain <= 960000) {
              return [85920, 0.35];
          } else if (remain > 960000) {
              return [181920, 0.45];
          }
      }


      function sumArray(array) {
          var total = 0;
          array.forEach(function (tax) {
              total += tax;
          });
          return total;
      }


      function gogogo() {
          var sallery = parseInt(document.getElementById('sallery-input').value);
          var gjjbl = parseInt(document.getElementById('gjj-input').value);
          var diff = parseInt(document.getElementById('diff-input').value);
          if (!sallery || !gjjbl) {
              return;
          }
          var base = 5000;
          var fiveRiskBase = [4279, 21396];
          var oneGold = [2300, 21400.00];

          var fiverRiskForTax = sallery;

          if (sallery < fiveRiskBase[0]) {
              fiverRiskForTax = fiveRiskBase[0];
          } else if (sallery > fiveRiskBase[1]) {
              fiverRiskForTax = fiveRiskBase[1]
          }

          var fiveRiskTaxList = [fiverRiskForTax * 0.08, fiverRiskForTax * 0.02, fiverRiskForTax * 0.005];
          var fiveRiskTax = sumArray(fiveRiskTaxList);

          var oneGoldForTax = sallery;

          if (sallery < oneGold[0]) {
              oneGoldForTax = oneGold[0];
          } else if (sallery > oneGold[1]) {
              oneGoldForTax = oneGold[1]
          }

          var oneGoldTax = oneGoldForTax * gjjbl/100;


          var fiveRiskOneGold = fiveRiskTax + oneGoldTax;

          var fivOneString = '<span class="label label-info">三险:</span>&nbsp;&nbsp;<span class="label label-success">养老险' + fiveRiskTaxList[0].toFixed(2) + '</span>&nbsp;&nbsp;<span class="label label-success">医疗险' + fiveRiskTaxList[1].toFixed(2) + '</span>&nbsp;&nbsp;<span style="white-space:normal;" class="label label-success">失业险' + fiveRiskTaxList[2].toFixed(2)
              + '</span><br /><br /><span class="label label-info">公积金:</span>&nbsp;&nbsp;<span class="label label-success">' + oneGoldTax.toFixed(2) + '</span>';

          document.getElementById("result1").innerHTML = fivOneString;

          var tax = [];


          var taxListString = '';
          for (var i = 1; i <= 12; i++) {
              var currentMonthRemain = (sallery - (fiveRiskOneGold + diff + base)) * i;
              var taxPercentInfo = getPercent(currentMonthRemain);
              tax[i] = currentMonthRemain * taxPercentInfo[1] - taxPercentInfo[0] - sumArray(tax);
              taxListString += '<li class="list-group-item">' + i + '月:' + Math.max(tax[i], 0).toFixed(2) + '</li>';
          }
          taxListString += '<li class="list-group-item">平均每月:' + Math.max(sumArray(tax)/12, 0).toFixed(2) + '</li>';

          document.getElementById("tax-list").innerHTML = taxListString;

          var tax1 = [];
          var MonthRemain = [];
          var taxafterListString = '';
          for (var i = 1; i <= 12; i++) {
              var currentMonthRemain1 = (sallery - (fiveRiskOneGold + diff + base)) * i;
              var taxPercentInfo1 = getPercent(currentMonthRemain1);
              tax1[i] = currentMonthRemain1 * taxPercentInfo1[1] - taxPercentInfo1[0] - sumArray(tax1);
              MonthRemain[i] = (sallery - (fiveRiskOneGold + Math.max(tax1[i], 0)));
              taxafterListString += '<li class="list-group-item">' + i + '月:' + MonthRemain[i].toFixed(2) + '</li>';
          }

          taxafterListString += '<li class="list-group-item">平均每月收入:' + Math.max(sumArray(MonthRemain)/12, 0).toFixed(2) + '</li>';
          document.getElementById("tax-after-list").innerHTML = taxafterListString;

          $('#result1').show();
          $('#result2').show();
          $('#result3').show();
      }

  </script>
</body>
</html>