一个基于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>
        &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp缴纳比例:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp个人&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp单位 </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>
时间: 2024-10-06 02:42:14

一个基于angularJS的工资计算器的相关文章

推荐一款超强大的基于Angularjs的自动完成(Autocomplete)标签及标签组插件–ngTagsInput

前言 今天利用中午午休时间,给大家分享推荐一款基于Angularjs的自动完成(Autocomplete)标签及标签组插件--ngTagsInput,功能超强大的.不信,你试试就知道^_^... AutoComplete-- 自动完成对开发人员来说应该不会太陌生,特别是前端开发者.即用户在文本框中输入内容或者当文本框获得焦点时智能提示与用户输入有关的建议内容.最常见的 百度(baidu.com).谷歌(google.com)等的搜索框就是这样来设计的.目的是为了给用户提供一个更好的输入体验. 在

基于angularJS和requireJS的前端架构

1.概要描述 1.1.angularJS描述:angularJS是可以用来构建WEB应用的,WEB应用中的一种端对端的完整解决方案.通过开发者呈现一个更高层次的抽象来简化应用的开发.最适合的就是用它来构建一个CRUD应用,它提供了非常方便的且统一高效的解决方案,其数据绑定.基本模版标识符.表单验证.路由.深度链接.组件重用.依赖注入.以及HTML标记等,最受欢迎的莫过于它的双向数据绑定. 1.2.requireJS描述:requireJS是来解决传统的页面加载script标记操作,通过其初始化配

从零学编程2-做个工资计算器

回顾上一篇:从零学编程1-写一封情书 做个工资计算器 主人公两枚: 鹰:从零学编程 我:从零教编程 我:阿鹰问你个问题,你喜欢做贡献吗? 鹰:不喜欢. 我:囧.OK,那我们换个问法,你喜欢钱吗? 鹰:喜欢!!!有钱我就可以买CF神器了,我跟你说啊最近粗了一把狙.. 我: OK,OK我们聊钱(强颜欢笑中) 大家都喜欢钱,但是钱的本质是什么呢?上过高中的都知道,它是商品交换的产物.商品不可能大街上去捡.就算是大街上去捡垃圾,那也是付出了劳动,清洁了环境不是吗?所以金钱的来源,就是做贡献.只有为社会做

基于AngularJS的企业软件前端架构[转载]

这篇是我参加QCon北京2014的演讲内容: 提纲: 企业应用在软件行业中占有很大的比重,而这类软件多数现在也都采用B/S的模式开发,在这个日新月异的时代,它们的前端开发技术找到了什么改进点呢? B/S企业软件前端开发模式大体上与桌面软件类似,都是偏重量级的,在前端可能会有较多的业务逻辑,这些业务逻辑如何被合理模块化,与界面分离,以便测试,成为这个领域的一个重要挑战.另一方面,由于企业应用的界面相对规整,偏重的是数据存取,没有太多花哨的东西,所以常见的界面控件也是可枚举的,如何让开发界面的工作能

基于AngularJS的拖拽上传

随着HTML5的普及,现在大部分浏览器都支持拖拽功能,今天我们要说的就是实现一套拖拽上传的功能(Angularjs+nodejs). 一.首先前端这款插件是基于AngularJS的,下面我们来看主要代码. 引入js: <script src="js/angular.1.3.15.min.js"></script> <script src="js/ng-file-upload-shim.min.js"></script>

在基于AngularJs架构的ABP项目中使用UEditor

[前提须知] 读过此篇博客 了解angular-ueditor 了解ABP如何使用 会使用VS2017 [1.下载ABP模板] https://aspnetboilerplate.com/Templates 选择ASP.NET MVC 5.x页签下基于AngularJs前端框架和基于Entity Framework对像映射关系的模板,如下图所示: [2.下载UEditor插件] http://ueditor.baidu.com/website/download.html#ueditor 这里我使

一个基于Android系统的新闻客户端(一)

一.整体概述 在服务器端,通过对凤凰网的抓取存入数据库,客户端通过向服务器发送请求得到新闻. 服务端用WCF,宿主为window服务,客户端为Java写的安卓程序. 二.客户端 我在eclipse里新建了个Android项目,命名为MyNewClient,eclipse自动生成二个xml布局文件,如图: 其中,fragment_main.xml是新版的布局文件,暂时不会用,把它删掉. 新建xml文件,命名为activity_foot.xml,在这里我们要做app的底部,先上代码: <?xml v

一个基于.NET平台的自动化/压力测试系统设计简述(可独立运行,提供源码)

AutoTest系统设计概述 AutoTest是一个基于.NET平台实现的自动化/压力测试的系统,可独立运行于windows平台下,支持分布式部署,不需要其他配置或编译器的支持.(本质是一个基于协议的测试工具),前面还有一篇对其功能的简单介绍[http://www.cnblogs.com/lulianqi/p/4773146.html] AutoTest用于发布的部分有2个部分,主程序[AutoTest.exe]及分布式部署程序[RemoteService.exe](用于将将测试业务分布式部署到

如何设计一个基于云计算的大型分布式系统

当今云计算被炒的沸沸扬扬,云计算显然已经是软件行业的大势所趋,如何设计一个基于云计算的大型分布式系统呢,下面基于云计算架构大型分布式系统展开鄙人的一点短浅的理解与见识. 首先,整个系统包含若干个系统模块,也就是子系统,每个子系统都单独的运行于一个计算机集群中,每个计算机集群包含若干台计算机. 其次,要设计一个整个系统的核心调度系统,这个调度系统运行在一个单独的计算机集群中,我们姑且将这个计算机集群叫做集群A,而这个核心调度系统只是负责记录系统的核心日志,存储每个子系统的文件位置块与索引,负责调度