基于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 相关文章推荐
一个对于Array的简单扩展
Oct 03 Javascript
js 图片随机不定向浮动的实现代码
Jul 02 Javascript
深入解析contentWindow, contentDocument
Jul 04 Javascript
js jquery ajax的几种用法总结(及优缺点介绍)
Jan 28 Javascript
JQuery中serialize() 序列化
Mar 13 Javascript
详解Angular路由 ng-route和ui-router的区别
May 22 Javascript
详解微信小程序中组件通讯
Oct 30 Javascript
Vue源码分析之Vue实例初始化详解
Aug 25 Javascript
layui固定下拉框的显示条数(有滚动条)的方法
Sep 10 Javascript
koa-passport实现本地验证的方法示例
Feb 20 Javascript
js实现盒子移动动画效果
Aug 09 Javascript
H5+css3+js搭建带验证码的登录页面
Oct 11 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
php编程实现获取excel文档内容的代码实例
2011/06/28 PHP
ThinkPHP实现非标准名称数据表快速创建模型的方法
2014/11/29 PHP
smarty缓存用法分析
2014/12/16 PHP
Smarty模板语法详解
2019/07/20 PHP
ie focus bug 解决方法
2009/09/03 Javascript
Jquery事件的连接使用示例
2013/06/18 Javascript
JQUERY实现左侧TIPS滑进滑出效果示例
2013/06/27 Javascript
使用indexOf等在JavaScript的数组中进行元素查找和替换
2013/09/18 Javascript
js实现的常用的左侧导航效果
2013/10/17 Javascript
javascript右下角弹层及自动隐藏(自己编写)
2013/11/20 Javascript
JS动态修改表格cellPadding和cellSpacing的方法
2015/03/31 Javascript
jquery背景跟随鼠标滑动导航
2015/11/20 Javascript
原生 JS Ajax,GET和POST 请求实例代码
2016/06/08 Javascript
Ext JS 实现建议词模糊动态搜索功能
2017/05/13 Javascript
JS获取短信验证码倒计时的实现代码
2017/05/22 Javascript
webpack 2的react开发配置实例代码
2017/07/28 Javascript
jquery实现左右轮播图效果
2017/09/28 jQuery
ReactNative之FlatList的具体使用方法
2017/11/29 Javascript
JavaScript树的深度优先遍历和广度优先遍历算法示例
2018/07/30 Javascript
vue 根据数组中某一项的值进行排序的方法
2018/08/30 Javascript
jQuery.validate.js表单验证插件的使用代码详解
2018/10/22 jQuery
vue组件内部引入外部js文件的方法
2020/01/18 Javascript
[09:43]DOTA2每周TOP10 精彩击杀集锦vol.5
2014/06/25 DOTA
python打开网页和暂停实例
2014/09/30 Python
Zabbix实现微信报警功能
2016/10/09 Python
Python 操作MySQL详解及实例
2017/04/30 Python
python实现学生管理系统
2018/01/11 Python
pandas groupby 分组取每组的前几行记录方法
2018/04/20 Python
Python创建空列表的字典2种方法详解
2020/02/13 Python
基于SpringBoot构造器注入循环依赖及解决方式
2020/04/26 Python
Python实现汇率转换操作
2020/05/03 Python
简述安装Slackware Linux系统的过程
2012/05/08 面试题
金融系毕业生自荐书
2014/07/08 职场文书
2015年志愿者服务工作总结
2015/04/20 职场文书
宾馆安全管理制度
2015/08/06 职场文书
2019年销售人员的职业生涯规划书
2019/03/25 职场文书