angular——倒計時

       <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: 告訴後臺,給用戶發送驗證碼   -->

        };
});
相關文章
相關標籤/搜索