发送短信验证码 倒计时

Posted 2021-01-19 kitty-blog

 1、页面样式：基于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>

 

2、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 () {

            }
        });
    }
}

 

3、发送短信 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 }