运费计算"/>
AngularJS尝鲜——快递运费计算
最近想多了解关于前端的内容,毕竟是全栈的时代了,不学一点就会落伍咯。先来尝尝AngularJS吧。
直接上案例:快递运费计算,我会分别使用原生js、jQuery、angularjs来实现。
原生js
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>完善快递运费计算</title> </head> <script src="//cdn.bootcss/angular.js/1.6.3/angular.min.js"></script> <body><!--看成一个小的app,一个小的程序--> <div ng-app="kuaidi" ng-controller="con"><p><input type="text" name="kg" ng-model="kg"/>公斤</p><p>运费:<span>{{price()}}</span>元</p> </div> </body> <script>var app = angular.module('kuaidi',[]);app.controller('con',function($scope){$scope.kg = 1;//设置默认值,这里对应的是app-model中的kg $scope.price = function(){return $scope.kg <= 1 ? 15 : 15 + ($scope.kg - 1) * 10;}}); </script> </html>
jquery
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Jquery做快递费用计算</title> </head> <script src=".2.0/jquery.min.js"></script> <body><p><input type="text" name="kg" />公斤</p><p>运费:<span></span>元</p> </body> <script>$('input').change(function(){var price = parseFloat(this.value) * 10;$('span').html(price);}); </script> </html>
AngularJS
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>完善快递运费计算</title> </head> <script src="//cdn.bootcss/angular.js/1.6.3/angular.min.js"></script> <body><!--看成一个小的app,一个小的程序--> <div ng-app="kuaidi" ng-controller="con"><p><input type="text" name="kg" ng-model="kg"/>公斤</p><p>运费:<span>{{price()}}</span>元</p> </div> </body> <script>var app = angular.module('kuaidi',[]);app.controller('con',function($scope){$scope.kg = 1;//设置默认值,这里对应的是ng-model中的kg $scope.price = function(){return $scope.kg <= 1 ? 15 : 15 + ($scope.kg - 1) * 10;}}); </script> </html>
感觉AngularJS很强大,虽然这里我只是简单的获取到了用户输入的数据,然后通过一个函数将计算的结果返回回去,最后用{{price()}}将数据展示出来。
转载于:.html
更多推荐
AngularJS尝鲜——快递运费计算
发布评论