發送短信驗證碼 倒計時

 一、頁面樣式：基於bootstrap 

 1   <div class="form-group">
 2                             <label class="col-md-4 control-label">手機號碼</label>
 3                             <div class="col-md-8">
 4                                 <div class="input-group m-b">
 5                                     <input class="form-control" id="Phone" type="tel" required pattern="/^1[3|4|5|7|8][0-9]\d{8}$/" placeholder="請輸入手機號" />
 6                                     <div class="input-group-btn" style="vertical-align: top;">
 7                                         <button type="button" id="sendSmsBtn" class="btn btn-default" onclick="sms.sendMsg(this)">發送驗證碼</button>
 8                                         <button type="button" disabled class="btn btn-default disabled miao hidden">剩餘 <span class="text-danger" id="lastSendSmsSeconds">60</span> '</button>
 9                                     </div>
10                                 </div>
11                             </div>
12                         </div>

 

二、ajax 封裝代碼：

var ajax = {
    post: function (url, data, success, fail, isShowErrorMsg) {
        $.ajax({
            url: url,
            type: 'POST',
            data: JSON.stringify(data),
            contentType: 'application/json;',
            success: function (json) {
                if (json.success) {
                    success(json.result);
                } else {
                    if (fail) {
                        fail(json.result);
                    }
                    if (isShowErrorMsg === undefined) {
                        baseAlert('danger', json.result.message);
                    }
                }
            },
            error: function (xhr, errorType, errormsg) {
                baseAlert('danger', '請求發生錯誤，請稍後重試！');
            },
            complete: function () {

            }
        });
    },
    get: function (url, success,fail,isShowErrorMsg) {
        $.ajax({
            url: url,
            type: 'GET',
            success: function (json) {
                if (json.success) {
                    success(json.result);
                }
                else {
                    if (fail) {
                        fail(json.result);
                    }
                    if (isShowErrorMsg === undefined) {
                        baseAlert('danger', json.result.message);
                    }
                }
            },
            error: function (xhr, errorType, error) {
                baseAlert('danger', '請求發生錯誤，請稍後重試！');
            },
            complete: function () {

            }
        });
    }
}

 

三、發送短信 js 代碼：

 1 var sms = {
 2     lastSendSmsSeconds: 5,//發送短信計時時間
 3     timer: null,//計時器
 4     //開始計時
 5     startCount: function () {
 6         var that = this;
 7         that.clearTimer();
 8         that.timer = setTimeout(function () {
 9             that.lastSendSmsSeconds--;
10             var isGoing = that.checkTimerCount();//檢查時間剩餘計時時間是否爲0
11             if (isGoing) {
12                 that.startCount();
13             }
14         }, 1000);
15     },
16     //清楚計時器
17     clearTimer: function () {
18         clearTimeout(this.timer);
19     },
20     //檢查時間剩餘計時時間是否爲0
21     checkTimerCount: function () {
22         var sendSmsBtn = $("#sendSmsBtn");
23         var $time = $("#lastSendSmsSeconds");
24         var $timeBox = $($time[0].parentElement);
25         //顯示剩餘時間
26         $time.text(this.lastSendSmsSeconds);
27         if (this.lastSendSmsSeconds === 0) {
28             this.clearTimer(); //清楚計時器
29             this.lastSendSmsSeconds = 60; //還原剩餘時間 60'
30             $timeBox.addClass("hidden");//隱藏剩餘時間顯示
31             sendSmsBtn.removeAttr("disabled").removeClass("hidden");//顯示發送短信按鈕
32             return false;
33         }
34         return true;
35     },
36     //發送短信
37     sendMsg: function (event) {
38         var that = $(event);//當前點擊的短信按鈕
39         var $time = $("#lastSendSmsSeconds");//剩餘時間
40         var $timeBox = $($time[0].parentElement);//剩餘時間box
41         that.attr("disabled", true);//設置當前按鈕不可點擊
42         var phone = $("#Phone").val();//獲取手機號
43         var smsToken = $("#SmsToken").val();//獲取短信token
44         if (phone.length === 0 || !isValidatedPhoneNumber(phone)) {//驗證手機號
45             baseAlert('danger', '請輸入正確的手機號');
46             $timeBox.addClass("hidden");//隱藏剩餘時間
47             that.removeAttr("disabled").removeClass("hidden");//發送短信按鈕顯示
48             return;
49         }
50         ajax.get('/SendSms?phone=' + phone + '&token=' + smsToken,
51             function (result) {
52                 baseAlert('success', result.message);//發送短信成功提示
53                 sms.lastSendSmsSeconds = result.lastSendSmsSeconds;//設置剩餘時間
54                 sms.startCount(sms.lastSendSmsSeconds);//開始倒計時
55                 $time.text(sms.lastSendSmsSeconds);//設置頁面剩餘時間顯示
56                 that.addClass("hidden").removeAttr("disabled");//隱藏發送短信按鈕，並不可點擊
57                 $timeBox.removeClass("hidden");//顯示剩餘時間
58             }, function () {
59                 $timeBox.addClass("hidden");//隱藏剩餘時間
60                 that.removeAttr("disabled").removeClass("hidden");//發送短信按鈕顯示
61                 sms.lastSendSmsSeconds = 60;//重置剩餘時間
62             });
63     }
64 }