使用AngularJS在HTML页面的定时器--60秒验证码_angularjs如何写一个定时检测-优快云博客

本文链接：https://blog.youkuaiyun.com/public_sbw/article/details/79754506

思路:

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