Angular.js 使用擷取驗證碼按鈕實現-倒計時

標籤：clear   擷取   核心   ng-model   manage   ica   one   data   alt   

擷取驗證碼介面效果

 

需要實現以下邏輯

按鈕不可選

--輸入電話號碼，按鈕可選

--點擊擷取，進入倒計時，按鈕不可選

--倒計時結束，回到初識狀態

核心代碼：

var cd = 60;var toDo = function() {    cd--;    $scope.countDown = "重新擷取 " + cd;};$interval(toDo, 1000, 60);

完整代碼：

html：

 <form name="form" class="form-validation">          <div class="list-group list-group-sm">            <div class="list-group-item">              <input  type="text" placeholder="phone" class="form-control no-border" ng-model="seller.phone" required>            </div>            <div class="list-group-item">                  <input style="width: 150px;float: left;border: 1px solid #DDD;"                       type="phone" placeholder="4位驗證碼" class="form-control no-border" ng-model="seller.verification" required>                <button style="width: 150px;float: right;" type="button" class="btn  btn-primary btn-block" ng-click="sendVerification()" ng-disabled=‘!seller.phone||send‘ >                    {{countDown}}                </button>                <div class="clearfix"></div>            </div>            <div class="list-group-item">               <input type="password" placeholder="Password" class="form-control no-border" ng-model="seller.password" required>            </div>          </div></form>

 

js:

app.controller(‘SignupFormController‘, [ ‘$interval‘, ‘$scope‘, ‘$http‘, ‘$state‘, function( $interval, $scope, $http, $state) {    $scope.countDown = "擷取驗證碼";    $scope.loginmsg="";    $scope.send = false;    $scope.sendVerification = function() {        $http.post(‘http://localhost:8083/boronManager/seller/verification/‘ + $scope.seller.phone, {verificationType: 1}).then(function(response) {            var req = response.data;            if(!req.success)                $scope.authError = req.error;        }, function(x) {            $scope.authError = response.data.error;        });        var cd = 60;        var toDo = function() {            $scope.send = true;            cd--;            if(cd < 0) {                cd = "";                $scope.send = false;            }            $scope.countDown = "重新擷取 " + cd;        };        $interval(toDo, 1000, 60);    };}]);

 

Angular.js 使用擷取驗證碼按鈕實現-倒計時