angular——倒计时

最新推荐文章于 2021-01-16 19:59:58 发布

weixin_30836759

最新推荐文章于 2021-01-16 19:59:58 发布

阅读量235

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/hu-clover/p/5410759.html

版权

　　　　　　 <div class="top_10 input_box">
                <label class="item item-input">
                    <i class="icon ion-chatbubble-working placeholder-icon"></i>
                    <input type="tel" placeholder="请输入短信验证码" autofocus ng-model="data.verifyMessage">
                </label>

                <input type="button" class="button retrieve font_16_14 button-calm white_text"
                       ng-disabled="data.retrieveDisabled"
                       ng-value="data.retrieveText" ng-model="data.retrieveText" ng-click="action.retrieve()">
            </div>

angular.module('MrTrustApp.controllers')

    .controller('AuthSendVerifyMessageCtrl', function ($scope, StateGo, $stateParams, $interval, $ionicLoading, $timeout) {

        //定义数据
        $scope.data = {

            retrieveDisabled: true,   //重新获取按钮默认不可用

            isChecked: true,         //接受协议默认勾选

            disabled: true,         //注册/登录按钮默认不可用

            retrieveText: '重新获取(59s)', //重新获取倒计时文字

            isLogin: false         //true:登录 , false:注册 (是否为登录)

        };

//显示号码部分数字
        $scope.data.showPhoneNumber = phoneNumber.slice(0, 3) + '****' + phoneNumber.slice(7);
//倒计时样式控制
        function countdown() {
            var second = 59,
                timePromise = undefined;

            timePromise = $interval(function () {
                if (second < 1) {

                    $scope.data.retrieveDisabled = false;

                    $interval.cancel(timePromise);
                    timePromise = undefined;

                    $scope.data.retrieveText = "重新获取";
                    second = 59;

                } else {
                    $scope.data.retrieveText = '重新获取(' + second + 's)';

                    second--;

                    $scope.data.retrieveDisabled = true;


                }
            }, 1000, 100);
        }

        countdown();


        //重新获取验证码
        $scope.action.retrieve = function () {
            countdown();
            return false;
            <!--  TODO: 告诉后台,给用户发送验证码   -->

        };
});