基于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对象模型-执行模型
Apr 28 Javascript
JQuery 学习笔记 选择器之二
Jul 23 Javascript
jQuery 标题的自动翻转实现代码
Oct 14 Javascript
在模板页面的js使用办法
Apr 01 Javascript
jquery下组织javascript代码(js函数化)
Aug 25 Javascript
浅谈JavaScript中的Math.atan()方法的使用
Jun 14 Javascript
JS实现左右拖动改变内容显示区域大小的方法
Oct 13 Javascript
javascript 实现文本使用省略号替代(超出固定高度的情况)
Feb 21 Javascript
vue添加axios,并且指定baseurl的方法
Sep 19 Javascript
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
Jan 18 jQuery
Vue学习之axios的使用方法实例分析
Jan 06 Javascript
JavaScript前后端JSON使用方法教程
Nov 23 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入门学习知识点二 PHP简单的分页过程与原理
2011/07/14 PHP
php实现随机显示图片方法汇总
2015/05/21 PHP
利用JS进行图片的切换即特效展示图片
2013/12/03 Javascript
localResizeIMG先压缩后使用ajax无刷新上传(移动端)
2015/08/11 Javascript
Js与Jq获取浏览器和对象值的方法
2016/03/18 Javascript
JQuery validate插件Remote用法大全
2016/05/15 Javascript
jQuery插件实现图片轮播特效
2016/06/16 Javascript
jQuery文字提示与图片提示效果实现方法
2016/07/04 Javascript
微信小程序 支付功能开发错误总结
2017/02/21 Javascript
jquery append与appendTo方法比较
2017/05/24 jQuery
基于AngularJS的简单使用详解
2017/09/10 Javascript
详解Vue路由钩子及应用场景(小结)
2017/11/07 Javascript
mescroll.js上拉加载下拉刷新组件使用详解
2017/11/13 Javascript
Node.js实现注册邮箱激活功能的方法示例
2018/03/23 Javascript
JavaScript门道之标准库
2018/05/26 Javascript
在vue中使用v-bind:class的选项卡方法
2018/09/27 Javascript
Javascript生成器(Generator)的介绍与使用
2021/01/31 Javascript
[52:14]VG vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
python实现同时给多个变量赋值的方法
2015/04/30 Python
Python的Django中将文件上传至七牛云存储的代码分享
2016/06/03 Python
python微信公众号开发简单流程
2018/03/23 Python
Python3.7中安装openCV库的方法
2018/07/11 Python
python BlockingScheduler定时任务及其他方式的实现
2019/09/19 Python
海蓝之谜(LA MER)澳大利亚官方商城:全球高端奢华护肤品牌
2017/10/27 全球购物
澳大利亚最便宜的网上药房:Chemist Warehouse
2020/01/30 全球购物
Java多态性的定义以及类型
2014/09/16 面试题
经典C++面试题一
2016/11/06 面试题
新年团拜会主持词
2014/04/02 职场文书
大学生简短的自我评价
2014/09/12 职场文书
2014年禁毒工作总结
2014/11/24 职场文书
在职人员跳槽求职信
2015/03/20 职场文书
2015年销售员工作总结范文
2015/04/07 职场文书
人事任命书范本
2015/09/21 职场文书
详解Html5项目适配系统深色模式方案总结
2021/04/14 HTML / CSS
mysql5.7使用binlog 恢复数据的方法
2021/06/03 MySQL
el-table-column 内容不自动换行的解决方法
2022/08/14 Vue.js