AngularJS尝鲜——快递运费计算

最近想多了解关于前端的内容,毕竟是全栈的时代了,不学一点就会落伍咯。先来尝尝AngularJS吧。

直接上案例:快递运费计算,我会分别使用原生JS、JQuery、AngularJS来实现。

AngularJS尝鲜——快递运费计算_第1张图片

原生js


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>原生JS,求快递运费title>
head>
<body>
    <p><input type="text" name="kg" />公斤p>
    <p>运费:<span>span>元p>
body>
<script>
    var input = document.getElementsByName('kg')[0];
    input.oninput = function(){
        var kg = input.value;
        document.getElementsByTagName('span')[0].innerHTML = parseFloat(kg) * 10;
    }   
script>
html>

Jquery


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Jquery做快递费用计算title>
head>
<script src="http://cdn.bootcss.com/jquery/3.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


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>完善快递运费计算title>
head>
<script src="//cdn.bootcss.com/angular.js/1.6.3/angular.min.js">script>
<body>


<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>

感觉AngularJS很强大,虽然这里我只是简单的获取到了用户输入的数据,然后通过一个函数将计算的结果返回回去,最后用{{price()}}将数据展示出来。

你可能感兴趣的:(HTML5)