您的位置：首页 > Web前端 > AngularJS

使用AngularJS在HTML页面的定时器--60秒验证码

2018-03-30 11:15 330 查看

思路:
引入angularJS的js文件
页面设置模块和控制器
添加ng-click点击事件,设置ng-bind数据显示
js代码：
    初始化模块
    定义控制器
        定义一个标识
        初始化时间
        初始化定时器
        判断标识
            false:return;
            true:
                显示倒计时
                    判断时间
                        time<=0
                            允许重发验证码
                            强制更新视图
                        $scope.$digest();
                            更新标识为true
                            初始化时间
                            关闭定时器
                    time>0
                            显示页面内容
                            强制更新视图

                            时间--
代码实现:<body>
    <div ng-app="singupApp" ng-controller="singupCtrl">
        <div class="col-sm-3 song">
            <a class="btn btn-default" ng-click="getCheckCode(telephone)" ng-bind="btnMsg"></a>
        </div>
    </div>
</body>
<script type="text/javascript">
    //初始化模块
    var singupApp = angular.module("singupApp",[]);
    //定义控制器
    singupApp.controller("singupCtrl",function($scope,$http){
        $scope.btnMsg = "获取验证码";
        //定义一个标识
        var active = true;
        //初始化时间
        var time = 60;
        //初始化定时器
        var secondInterval;
        $scope.getCheckCode = function(telephone) {
            if(active == false) {
                return;
            }

            //发送http请求,通知服务器发送短信通知
            var regex = 手机号正则;
            if(regex.test(telephone)) {
               //发送短信
            }else{
                //验证失败
                alert("非法手机号,请重新输入！！！");
                return;
            }

            //显示倒计时
            secondInterva = setInterval(function(){
                if(time <= 0){
                    //允许重新发送验证码
                    $scope.btnMsg = "重发验证码";
                    //强制更新视图
                    $scope.$digest();
                    active = true;
                    time = 60;
                    //关闭定时器
                    clearInterval(secondInterva);
                    secondInterva = undefined;

                }else {
                    $scope.btnMsg = time + "秒可后重发";
                    //强制跟新视图
                    $scope.$digest();
                    time--;
                }
            },1000);
        };
    });
</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航