zoukankan      html  css  js  c++  java
  • AngularJS (验证码倒计时)

    AngularJS的常用属性:

      

    ng-app:在任何元素上使用,代表angular应用作用域

    ng-controller:指定控制器

    ng-model:指定模型

    ng-bind:进行属性取值,用于显示

    双向数据绑定:

      更新模型,视图会自动更新,更新视图,模型会自动更新

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>AngularJS双向数据绑定</title>
            <script type="text/javascript" src="../js/angular.min.js" ></script>
        </head>
        <!-- ng-app是angular编程入口,是模块作用域  -->
        <body ng-app>
            <div>
                <!-- ng-model模型作用  -->
                <input type="text" name="name" ng-model="name" />
            </div>
            <div>
                <!-- {{}} 等价于 ng-bind 用于数据显示 -->
                Hello, {{name}}
            </div>
        </body>
    </html>

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>AngularJS基于模块化</title>
            <script type="text/javascript" src="../js/angular.min.js" ></script>
        </head>
        
        <body>
            <!-- ng-app="myapp" 定义了一个模块 -->
            <div ng-app="myapp" ng-controller="myctrl">
                <div>
                    <!-- ng-model模型作用  -->
                    <input type="text" name="name" ng-model="name" />
                </div>
                <div>
                    <!-- {{}} 等价于 ng-bind 用于数据显示 -->
                    Hello, {{name}}
                </div>
            </div>
            
            <script type="text/javascript">
                // 初始化 myapp 模块 
                var myapp = angular.module("myapp",[]);
                
                // 定义模块的控制器 
                // 依赖注入 ,$scope作用域对象,操作当前作用域视图 
                myapp.controller("myctrl", ["$scope", function($scope){
                    // 对模型进行初始化赋值 
                    $scope.name = "我爱JAVA";
                }]);
            </script>
        </body>
    </html>

    Controller控制器  model模型  view视图

    Angular事件绑定

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>AngularJS基于MVC复杂操作</title>
            <script type="text/javascript" src="../js/angular.min.js" ></script>
        </head>
        
        <body>
            <!-- ng-app="myapp" 定义了一个模块 -->
            <div ng-app="myapp" ng-controller="myctrl">
                <div>
                    <!-- ng-model模型作用  -->
                    <input type="text" name="name" ng-model="name" />
                    
                    <!-- 提供按钮 --> 
                    <input type="button" value="清空" ng-click="clearVal()" />
                </div>
                <div>
                    <!-- {{}} 等价于 ng-bind 用于数据显示 -->
                    Hello, {{name}}
                </div>
            </div>
            
            <script type="text/javascript">
                // 初始化 myapp 模块 
                var myapp = angular.module("myapp",[]);
                
                // 定义模块的控制器 
                // 依赖注入 ,$scope作用域对象,操作当前作用域视图 
                myapp.controller("myctrl", ["$scope", function($scope){
                    // 对模型进行初始化赋值 
                    $scope.name = "我爱JAVA";
                    
                    // 在作用域 提供 clearVal 点击事件 
                    $scope.clearVal = function(){
                        $scope.name = "" ; // 模型设置为空 
                    }
                }]);
            </script>
        </body>
    </html>

    AngularJS 集合数据遍历显示

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>AngularJS集合数据遍历显示 </title>
            <script type="text/javascript" src="../js/angular.min.js" ></script>
        </head>
        
        <body ng-app="myapp" ng-controller="myctrl">
            <table width="100%" border="1">
                <tr>
                    <th>序号</th>
                    <th>商品编号</th>
                    <th>商品名称</th>
                    <th>价格</th>
                </tr>
                <tr ng-repeat="product in products">
                    <td>{{$index+1}}</td>
                    <td>{{product.id}}</td>
                    <td>{{product.name}}</td>
                    <td>{{product.price}}</td>
                </tr>
            </table>
        </body>
        
        <script type="text/javascript">
            var myapp = angular.module("myapp",[]);
            myapp.controller("myctrl",["$scope",function($scope){
                $scope.products = [
                    {
                        id : 1,
                        name : '索尼手机',
                        price : 3000
                    },
                    {
                        id : 2,
                        name : '三星手机',
                        price : 7000
                    }
                ];
            }])
        </script>
    </html>

    基于angularJS完成获取验证码,显示60秒倒计时的功能

    导入应用模块和控制器

    在最外层的div中加入应用模块和控制器

    在发送验证码的标签上添加属性并绑定事件

    发送短信的核心代码

    <script type="text/javascript">
                // 模块定义 
                var signupApp = angular.module("signupApp", []);
                // 控制器定义
                signupApp.controller("signupCtrl", ["$scope","$http",function($scope,$http) {
                    $scope.btnMsg = "发送验证码";
                    var active = true;
                    var second = 60; // 倒计时60秒
                    var secondInterval;
    
                    $scope.getCheckCode = function(telephone) {
                        if(active == false) {
                            return;
                        }
    
                        显示倒计时按钮,60秒后,允许重新发送 
                        active = false;
                        secondInterval = setInterval(function() {
                            if(second < 0) {
                                // 倒计时结束,允许重新发送 
                                $scope.btnMsg = "重发验证码";
                                // 强制更新视图
                                $scope.$digest();
                                active = true;
                                second = 60;
                                // 关闭定时器
                                clearInterval(secondInterval);
                                secondInterval = undefined;
                            } else {
                                // 继续计时
                                $scope.btnMsg = second + "秒后重发";
                                // 强制更新视图
                                $scope.$digest();
                                second--;
                            }
                        }, 1000);
                    }
                }]);
            </script>
  • 相关阅读:
    ACM的探索之Keen On Evrything But Triangle(我觉得可以很接近啦!!)
    ACM的探索之Just Skip The Problem
    ACM的探索之Everything Is Generated In Equal Probability(这真的是很有趣的话语丫!)
    心情散记
    识别有效的IP地址和掩码并进行分类统计
    网络流复习计划
    CF1076D Edge Deletion
    bzoj4563 HAOI2016放旗子
    BZOJ2152聪聪可可
    BZOJ3224普通平衡树
  • 原文地址:https://www.cnblogs.com/learnjfm/p/7406814.html
Copyright © 2011-2022 走看看