基于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 相关文章推荐
jquery中:input和input的区别分析
Jul 13 Javascript
jquery 延迟执行实例介绍
Aug 20 Javascript
JS中的异常处理方法分享
Dec 22 Javascript
jQuery 实现自动填充邮箱功能(带下拉提示)
Oct 14 Javascript
jquery实现聚光灯效果的方法
Feb 06 Javascript
使用JavaScript和CSS实现文本隔行换色的方法
Nov 04 Javascript
JS中with的替代方法与String中的正则方法详解
Dec 23 Javascript
angularjs使用directive实现分页组件的示例
Feb 07 Javascript
使用travis-ci如何持续部署node.js应用详解
Jul 30 Javascript
js实现Tab选项卡切换效果
Jul 17 Javascript
Vue实现移动端左右滑动效果的方法
Nov 27 Javascript
JS/CSS实现字符串单词首字母大写功能
Sep 03 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
AM/FM收音机的安装与调试
2021/03/02 无线电
新手学习PHP的一些基础知识分享
2011/07/27 PHP
PHP mail()函数使用及配置方法
2014/01/14 PHP
php判断文件夹是否存在不存在则创建
2015/04/09 PHP
PHP设计模式之模板模式定义与用法详解
2018/12/20 PHP
php用xpath解析html的代码实例讲解
2019/02/14 PHP
laravel框架数据库操作、查询构建器、Eloquent ORM操作实例分析
2019/12/20 PHP
html数组字符串拼接的最快方法
2009/09/16 Javascript
JavaScript实现的购物车效果可以运用在好多地方
2014/05/09 Javascript
js实现点击左右按钮轮播图片效果实例
2015/01/29 Javascript
javascript递归回溯法解八皇后问题
2015/04/22 Javascript
基于javascript实现仿百度输入框自动匹配功能
2016/01/03 Javascript
jQuery实现多张图片上传预览(不经过后端处理)
2017/04/29 jQuery
Javascript实现base64的加密解密方法示例
2017/06/27 Javascript
JS实现页面打印(整体、局部)
2017/08/18 Javascript
在VUE style中使用data中的变量的方法
2020/06/19 Javascript
JavaScript 实现轮播图特效的示例
2020/11/05 Javascript
举例讲解Python的Tornado框架实现数据可视化的教程
2015/05/02 Python
Python中with及contextlib的用法详解
2017/06/08 Python
关于Python的一些学习总结
2018/05/25 Python
python实现windows壁纸定期更换功能
2019/01/21 Python
Python3实现定时任务的四种方式
2019/06/03 Python
使用Python完成15位18位身份证的互转功能
2019/11/06 Python
Windows下python3安装tkinter的问题及解决方法
2020/01/06 Python
使用Keras 实现查看model weights .h5 文件的内容
2020/06/09 Python
解决tensorflow/keras时出现数组维度不匹配问题
2020/06/29 Python
纯CSS3实现带动画效果导航菜单无需js
2013/09/27 HTML / CSS
DC Shoes官网:美国滑板鞋和服饰品牌
2017/09/03 全球购物
Speedo速比涛德国官方网站:世界领先的泳装品牌
2019/08/26 全球购物
补充协议书范本
2014/04/23 职场文书
个人德育工作总结
2015/03/05 职场文书
前台接待岗位职责范本
2015/04/03 职场文书
2015年教师节感言
2015/08/03 职场文书
2016年入党心得体会范文
2016/01/23 职场文书
Mysql 如何查询时间段交集
2021/06/08 MySQL
Redis之RedisTemplate配置方式(序列和反序列化)
2022/03/13 Redis