Angular.js 使用获取验证码按钮实现-倒计时

Posted 2020-09-14 Z·Fanghan

获取验证码界面效果如图：

 

需要实现以下逻辑

按钮不可选

--输入电话号码，按钮可选

--点击获取，进入倒计时，按钮不可选

--倒计时结束，回到初识状态

核心代码：

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);
    };
}]);