zoukankan      html  css  js  c++  java
  • 工资1万每年涨5%十年内的税前收入详情

    假如:

    第一年工资:1万,

    每年涨幅:5%,

    那么十年内的收入详情如下图:

    代码如下:

    <!DOCTYPE html>
    <html>
    
      <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>zhengshize</title>
        <link rel="stylesheet" type="text/css" href="http://unpkg.com/iview/dist/styles/iview.css" />
        <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
        <script src="https://cdn.bootcss.com/iview/3.4.2/iview.min.js"></script>
        <style>
          .content {
            margin: 30px auto;
            max-width: 1000px;
          }
          .input_width {
            width: 120px;
          }
        </style>
      </head>
      <body>
        <div id="zhengshize">
          <div class="content">
            <Row>
              <i-col span=21>
                <i-form :label-width="120" inline>
                  <form-item label="当前工资:">
                    <i-input type="text" class="input_width" v-model="wage" />
                  </form-item>
                  <form-item label="每年涨幅(%):">
                    <i-input type="text" class="input_width" v-model="yearly" />
                  </form-item>
                  <form-item label="多少年内:">
                    <Input-Number type="text" class="input_width" v-model="years" />
                  </form-item>
                </i-form>
              </i-col>
              <i-col span=3>
                <i-button @click="calc(true)">重置</i-button>
                <i-button type="primary" @click="calc()">计算</i-button>
              </i-col>
            </Row>
            <Alert>
              <Row style="text-align:center">
                <i-col span=6>税前总收入:<strong>{{gainsAll | zheng}}</strong></i-col>
              </Row>
            </Alert>
            <i-table :loading="loading" :columns="columns1" :data="data1" size="small" border highlight-row></i-table>
          </div>
        </div>
        <script type="text/javascript">
          new Vue({
            el: "#zhengshize",
            data: {
              loading: true,
              wage: 10000,
              yearly: 5,
              years: 10,
              gains: 0,
              gainsAll: 0,
              columns1: [
                {
                  type: "index",
                  title: "第几年",
                  sortable: true,
                  align: 'center'
                },
                {
                  title: '相比第一年涨(%)',
                  align: 'center',
                  sortable: true,
                  key: 'perGains'
                },
                {
                  title: '每年涨幅(%)',
                  align: 'center',
                  key: 'gains'
                },
                {
                  title: '税前月收入(元)',
                  align: 'center',
                  sortable: true,
                  key: 'currentYearGains'
                },
                {
                  title: '税前年收入(万元)',
                  align: 'center',
                  sortable: true,
                  key: 'currentYearAllGains'
                },
              ],
              data1: [
                {
                  currentYearGains: "",
                  gains: "",
                  perGains: "",
                  currentYearAllGains: ""
                }
              ],
            },
            methods: {
              calc(res) {
                this.gainsAll = 0;
                this.data1 = [];
                if(res) {
                  this.wage = 10000;
                  this.yearly = 5;
                  this.years = 10;
                }
                for (let i = 0; i < this.years; i++) {
                  let curPercent = Math.pow((1 + this.yearly / 100), i),       // 相比第一年的比例
                      currentYearGains = (this.wage * (curPercent)),           // 每年的工资
                      perPercent = (curPercent - 1) * 100;                     // 相比第一年涨幅
    
                  this.data1.push({
                    currentYearGains: currentYearGains.toFixed(2),
                    gains: this.yearly,
                    perGains: perPercent.toFixed(2),
                    currentYearAllGains: (currentYearGains*12/10000).toFixed(2)
                  });
                  this.gainsAll = this.gainsAll + (currentYearGains * 12 / 10000);
                }
                this.loading = false;
              }
            },
            created() {
              this.calc();
            },
            filters: {
              zheng(data) {
                return (data).toFixed(2) || 0;
              }
            }
          });
        </script>
      </body>
    </html>
    All Code
  • 相关阅读:
    部署asp.net网站若干记录
    部署asp.net网站容易忽视的问题
    我的wp记录WordPress3.0导航菜单图文使用教程
    问题org.apache.catalina.core.StandardWrapperValve invoke 严重: Servlet.service() for servlet jsp threw exception
    spring + hibernate 配置
    FlexPaper二次开发简单收尾
    C++集成设计环境——Code::Blocks安装过程
    onlineDoc修改
    问题java.net.ConnectException: connection failed: socket,host=localhost,port=8100,tcpNoDelay=1
    解决java web项目导入后出现的问题 cannot be read or is not a valid ZIP file
  • 原文地址:https://www.cnblogs.com/zhengshize/p/11115804.html
Copyright © 2011-2022 走看看