基于AngularJS实现的工资计算器实例
网络编程 2021-07-04 18:32www.168986.cn编程入门
这篇文章主要介绍了基于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 = shuiqianyue0.03;
}
else if(shuiqianyue<4500)
{
gerensuodeshuijisuan = shuiqianyue0.1-105;
}
else if(shuiqianyue<9000)
{
gerensuodeshuijisuan = shuiqianyue0.2-555;
}
else if(shuiqianyue<35000)
{
gerensuodeshuijisuan = shuiqianyue0.25-1005;
}
else if(shuiqianyue<55000)
{
gerensuodeshuijisuan = shuiqianyue0.3-2775;
}
else if(shuiqianyue<80000)
{
gerensuodeshuijisuan = shuiqianyue0.35-5505;
}
else
{
gerensuodeshuijisuan = shuiqianyue0.45-13505;
}
scope.salary.gerensuodeshui = gerensuodeshuijisuan;
scope.salary.shuihougongzi = scope.salary.shuiqiangonngzi-scope.salary.gerenjiaoshui-scope.salary.gerensuodeshui;
}
});
</script>
</body>
</html>
PS这里再为大家推荐几款在线计算工具供大家参考使用
在线投资理财计算器
在线存款计算器
科学计算器在线使用_高级计算器在线计算
在线计算器_标准计算器
更多关于AngularJS相关内容感兴趣的读者可查看本站专题《》、《》及《》
希望本文所述对大家AngularJS程序设计有所帮助。
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程：电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示：编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程