基于AngularJS实现的工资计算器实例


Posted in Javascript onJune 16, 2017

本文实例讲述了基于AngularJS实现的工资计算器。分享给大家供大家参考,具体如下:

先看界面:

基于AngularJS实现的工资计算器实例

基于AngularJS实现的工资计算器实例

其实在ng中最让人印象深刻的就是数据的双向绑定,在html中就完成了很多操作。大概用到的就是控制器视图服务等,没有分模块写控制器,代码如下:

<html ng-app = "myApp">
<head>
  <title>工资计算器ng</title>
  <script src= "angular.js"></script>
</head>
<body>
  <div ng-controller = "MyController">
    税前工资:<input ng-model="salary.shuiqiangonngzi"></input>
    税后工资:<input ng-model="salary.shuihougongzi" ng-readonly = true></input><button ng-click = "calulate()">计算</button></br>
    缴纳基数:社保<input ng-model="salary.shebao"></input> 公积金<input ng-model="salary.gongjijin"></input></br>
           缴纳比例:       个人                单位 </br>
    养老:<input ng-model="salary.gerenyanglaobili"></input>{{salary.gerenyanglao| number:2}}<input ng-model="salary.danweiyanglaobili"></input>{{salary.danweiyanglao| number:2}}</br>
    医疗:<input ng-model="salary.gerenyiliaobili"></input>{{salary.gerenyiliao| number:2}}<input ng-model="salary.danweiyiliaobili"></input>{{salary.danweiyiliao| number:2}}</br>
    失业:<input ng-model="salary.gerenshiyebili"></input>{{salary.gerenshiye| number:2}}<input ng-model="salary.danweishiyebili"></input>{{salary.danweishiye| number:2}}</br>
    工伤:<input ng-model="salary.gerengongshangbili"></input>{{salary.gerengongshang| number:2}}<input ng-model="salary.danweigongshangbili"></input>{{salary.danweigongshang| number:2}}</br>
    生育:<input ng-model="salary.gerenshengyubili"></input>{{salary.gerenshengyu| number:2}}<input ng-model="salary.danweishengyubili"></input>{{salary.danweishengyu| number:2}}</br>
    公积金:<input ng-model="salary.gerengongjijinbili"></input>{{salary.gerengongjijin| number:2}}<input ng-model="salary.danweigongjijinbiili"></input>{{salary.danweigongjijin | number:2}}</br>
    个人缴税:{{salary.gerenjiaoshui| number:2}}单位缴税:{{salary.danweijiaoshui | number:2}}</br>
    个人所得税:{{salary.gerensuodeshui| number:2}}
    <p>默认数据是北京市计算比例。</p>
    <h5>{{theTime}}</h5>
  </div>
  <script type = "text/javascript">    
    var app = angular.module("myApp", []);
    app.controller('MyController',
      function($scope,$interval,jisuan) {
        $scope.salary= {gerenyanglaobili:0.08,gerenyanglao:0,danweiyanglaobili:0.2,danweiyanglao:0,
                gerenyiliaobili:0.02,gerenyiliao:0,danweiyiliaobili:0.1,danweiyiliao:0,
                gerenshiyebili:0.002,gerenshiye:0,danweishiyebili:0.01,danweishiye:0,
                gerengongshangbili:0,gerengongshang:0,danweigongshangbili:0.008,danweigongshang:0,
                gerenshengyubili:0,gerenshengyu:0,danweishengyubili:0.02,danweishengyu:0,
                gerengongjijinbili:0.12,gerengongjijin:0,danweigongjijinbiili:0.12,danweigongjijin:0,
                shuiqiangonngzi:10000,shuihougongzi:0,shebao:3000,gongjijin:3000,gerenjiaoshui:0,danweijiaoshui:0,gerensuodeshui:0
                };
        $scope.$watch('salary.shuiqiangonngzi', function(newVal, oldVal, scope) {
          if(newVal!==oldVal)
          {
            jisuan.myFunc(scope);
          }
        });
        $scope.$watch('salary.shebao', function(newVal, oldVal, scope) {
          if(newVal!==oldVal)
          {
            jisuan.myFunc(scope);
          }
        });
        $scope.$watch('salary.gongjijin', function(newVal, oldVal, scope) {
          if(newVal!==oldVal)
          {
            jisuan.myFunc(scope);
          }
        });
        jisuan.myFunc($scope);
        $scope.calulate = function(){
          jisuan.myFunc($scope);
        };
        $scope.theTime = new Date().toLocaleTimeString();
        $interval(function () {
          $scope.theTime = new Date().toLocaleTimeString();
        }, 1000);
    });
    app.service('jisuan',function(){
        this.myFunc = function(scope){
          scope.salary.gerenyanglao = scope.salary.gerenyanglaobili * scope.salary.shebao;
          scope.salary.danweiyanglao = scope.salary.danweiyanglaobili * scope.salary.shebao;
          scope.salary.gerenyiliao = scope.salary.gerenyiliaobili * scope.salary.shebao;
          scope.salary.danweiyiliao = scope.salary.danweiyiliaobili * scope.salary.shebao;
          scope.salary.gerenshiye = scope.salary.gerenshiyebili * scope.salary.shebao;
          scope.salary.danweishiye = scope.salary.danweishiyebili * scope.salary.shebao;
          scope.salary.gerengongshang = scope.salary.gerengongshangbili * scope.salary.shebao;
          scope.salary.danweigongshang = scope.salary.danweigongshangbili * scope.salary.shebao;
          scope.salary.gerenshengyu = scope.salary.gerenshengyubili * scope.salary.shebao;
          scope.salary.danweishengyu = scope.salary.danweishengyubili * scope.salary.shebao;
          scope.salary.gerengongjijin = scope.salary.gerengongjijinbili * scope.salary.gongjijin;
          scope.salary.danweigongjijin = scope.salary.danweigongjijinbiili * scope.salary.gongjijin;
          scope.salary.gerenjiaoshui = scope.salary.gerenyanglao + scope.salary.gerenyiliao + scope.salary.gerenshiye + scope.salary.gerengongshang + scope.salary.gerenshengyu + scope.salary.gerengongjijin;
          scope.salary.danweijiaoshui = scope.salary.danweiyanglao + scope.salary.danweiyiliao + scope.salary.danweishiye + scope.salary.danweigongshang + scope.salary.danweishengyu + scope.salary.danweigongjijin;
          var shuiqianyue = scope.salary.shuiqiangonngzi-scope.salary.gerenjiaoshui-3500;
          var gerensuodeshuijisuan =0;
          if(shuiqianyue<0)
          {
            gerensuodeshuijisuan = 0;
          }
          else if(shuiqianyue<1500)
          {
            gerensuodeshuijisuan = shuiqianyue*0.03;
          }
          else if(shuiqianyue<4500)
          {
            gerensuodeshuijisuan = shuiqianyue*0.1-105;
          }
          else if(shuiqianyue<9000)
          {
            gerensuodeshuijisuan = shuiqianyue*0.2-555;
          }
          else if(shuiqianyue<35000)
          {
            gerensuodeshuijisuan = shuiqianyue*0.25-1005;
          }
          else if(shuiqianyue<55000)
          {
            gerensuodeshuijisuan = shuiqianyue*0.3-2775;
          }
          else if(shuiqianyue<80000)
          {
            gerensuodeshuijisuan = shuiqianyue*0.35-5505;
          }
          else
          {
            gerensuodeshuijisuan = shuiqianyue*0.45-13505;
          }
          scope.salary.gerensuodeshui = gerensuodeshuijisuan;
          scope.salary.shuihougongzi = scope.salary.shuiqiangonngzi-scope.salary.gerenjiaoshui-scope.salary.gerensuodeshui;
      }
    });
  </script>
</body>
</html>
Javascript 相关文章推荐
javascript call方法使用说明
Jan 11 Javascript
JQUERY获取form表单值的代码
Jul 17 Javascript
使用firebug进行调试javascript的示例
Dec 16 Javascript
jQuery函数map()和each()介绍及异同点分析
Nov 08 Javascript
JavaScript实现同时调用多个函数的方法
Nov 09 Javascript
javascript每日必学之多态
Feb 23 Javascript
jQuery简单实现tab选项卡切换效果
Jun 20 Javascript
微信公众号开发 自定义菜单跳转页面并获取用户信息实例详解
Dec 08 Javascript
作为老司机使用 React 总结的 11 个经验教训
Apr 08 Javascript
解决低版本的浏览器不支持es6的import问题
Mar 09 Javascript
webpack4 处理SCSS的方法示例
Sep 03 Javascript
通过实例了解JS 连续赋值
Sep 24 Javascript
Angular+Node生成随机数的方法
Jun 16 #Javascript
JS利用正则表达式实现简单的密码强弱判断实例
Jun 16 #Javascript
vue高德地图之玩转周边
Jun 16 #Javascript
JavaScript实现提交模式窗口后刷新父窗口数据的方法
Jun 16 #Javascript
JS 组件系列之BootstrapTable的treegrid功能
Jun 16 #Javascript
vue之数据交互实例代码
Jun 16 #Javascript
基于jQuery和CSS3实现APPLE TV海报视差效果
Jun 16 #jQuery
You might like
正义联盟的终局之战《天启星战争》将成为DC动画宇宙的最后一部
2020/04/09 欧美动漫
PHP提取字符串中的图片地址[正则表达式]
2011/11/12 PHP
PHP获取用户客户端真实IP的解决方案
2016/10/10 PHP
thinkphp5 migrate数据库迁移工具
2018/02/20 PHP
laravel + vue实现的数据统计绘图(今天、7天、30天数据)
2018/07/31 PHP
PHP实现倒计时功能
2020/11/16 PHP
PHP 裁剪图片
2021/03/09 PHP
flash调用js中的方法,让js传递变量给flash的办法及思路
2013/08/07 Javascript
Jquery右下角抖动、浮动 实例代码(兼容ie6、FF)
2013/08/15 Javascript
JavaScript保留两位小数的2个自定义函数
2014/05/05 Javascript
AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录
2015/01/02 Javascript
浏览器兼容的JS写法总结
2016/04/27 Javascript
Javascript 跨域知识详细介绍
2016/10/30 Javascript
原生JS上传大文件显示进度条 php上传文件代码
2020/03/27 Javascript
[15:41]教你分分钟做大人——灰烬之灵
2015/03/11 DOTA
python获取标准北京时间的方法
2015/03/24 Python
Python3读取文件常用方法实例分析
2015/05/22 Python
使用Python解析JSON数据的基本方法
2015/10/15 Python
python实现教务管理系统
2018/03/12 Python
在Python中构建增广矩阵的实现方法
2019/07/01 Python
使用PyTorch将文件夹下的图片分为训练集和验证集实例
2020/01/08 Python
Flask 上传自定义头像的实例详解
2020/01/09 Python
Pyinstaller加密打包应用的示例代码
2020/06/11 Python
python获取本周、上周、本月、上月及本季的时间代码实例
2020/09/08 Python
Vichy薇姿加拿大官网:法国药妆,全球专业敏感肌护肤领先品牌
2018/07/11 全球购物
Kingsoft金山公司C/C++笔试题
2016/05/10 面试题
教师求职推荐信范文
2013/11/20 职场文书
厨房管理计划书
2014/04/27 职场文书
领导干部作风整顿个人剖析材料
2014/10/11 职场文书
催款通知书范文
2015/04/17 职场文书
运动会新闻报道稿
2015/07/22 职场文书
办公室主任岗位竞聘书
2015/09/15 职场文书
优秀员工演讲稿
2019/06/21 职场文书
Python文件的操作示例的详细讲解
2021/04/08 Python
HDFS免重启挂载新磁盘
2022/04/06 Servers
CSS SandBox应用场景及常见问题
2022/06/25 HTML / CSS