如何基于AngularJS实现工资计算器-创新互联

这篇文章主要介绍了如何基于AngularJS实现工资计算器,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

创新互联公司坚持“要么做到,要么别承诺”的工作理念,服务领域包括:网站建设、网站制作、企业官网、英文网站、手机端网站、网站推广等服务,满足客户于互联网时代的向阳网站设计、移动媒体设计的需求,帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴!

js有什么特点

1、js属于一种解释性脚本语言;2、在绝大多数浏览器的支持下,js可以在多种平台下运行,拥有着跨平台特性;3、js属于一种弱类型脚本语言,对使用的数据类型未做出严格的要求,能够进行类型转换,简单又容易上手;4、js语言安全性高,只能通过浏览器实现信息浏览或动态交互,从而有效地防止数据的丢失;5、基于对象的脚本语言,js不仅可以创建对象,也能使用现有的对象。

具体如下:

先看界面:

如何基于AngularJS实现工资计算器

如何基于AngularJS实现工资计算器

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



  工资计算器ng
  


  
    税前工资:
    税后工资:计算
    缴纳基数:社保 公积金
           缴纳比例:       个人                单位 
    养老:{{salary.gerenyanglao| number:2}}{{salary.danweiyanglao| number:2}}
    医疗:{{salary.gerenyiliao| number:2}}{{salary.danweiyiliao| number:2}}
    失业:{{salary.gerenshiye| number:2}}{{salary.danweishiye| number:2}}
    工伤:{{salary.gerengongshang| number:2}}{{salary.danweigongshang| number:2}}
    生育:{{salary.gerenshengyu| number:2}}{{salary.danweishengyu| number:2}}
    公积金:{{salary.gerengongjijin| number:2}}{{salary.danweigongjijin | number:2}}
    个人缴税:{{salary.gerenjiaoshui| number:2}}单位缴税:{{salary.danweijiaoshui | number:2}}
    个人所得税:{{salary.gerensuodeshui| number:2}}     

默认数据是北京市计算比例。

    
{{theTime}}
  
           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;       }     });   

感谢你能够认真阅读完这篇文章,希望小编分享的“如何基于AngularJS实现工资计算器”这篇文章对大家有帮助,同时也希望大家多多支持创新互联建站,关注创新互联网站建设公司行业资讯频道,更多相关知识等着你来学习!

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


分享文章:如何基于AngularJS实现工资计算器-创新互联
浏览地址:http://myzitong.com/article/ddpjhi.html

其他资讯