使用JavaScript实现短信重发倒计时 | GCidea's blog

JerryXia 发表于 2018-05-03 14:11:11 , 阅读 (2)

1. 主要html结构
2. 效果
3. 主要逻辑

主要html结构

以下html片段表示了重发倒计时组件的文档结构，依赖Amaze UI样式框架。

onclick=”btnSendMsgAgain();return false;”中的return false作用：
验证码是位于form表单中的，点击该按钮的作用是发送验证码，而不是提交表单，return false为了彻底阻止元素的默认事件。

1
2
3

<div class="am-u-sm-4  am-margin-left-0 am-padding-left-0">
    <button id="getVerifyCodeAgain" type="button" class="am-btn am-margin-left-0" onclick="btnSendMsgAgain();return false;">发送验证码</button>
</div>

效果

主要逻辑

//短信重置密码-发送短信验证码
function btnSendMsg(){
    $.ajax({
         url: "{:U('forgetPasswordBySMS')}",
         type: "GET",
         async: true,
         data: {username: $("#hiddenUsername-readyToSendMsg").val()},
         dataType: "json",
         timeout: 10000,
         success: function(data){
         if(data.status=='success'){
             $("#readyToSendMsg").modal('close');
             $("#hiddenUsername-resetPasswordBySMSbtn").attr('value',data.username);
             $("#phone-resetPasswordBySMSbtn").html(data.phone);
             $("#resetPasswordBySMSbtn").modal({
                 width: 500,
                 height:400,
                 closeViaDimmer: 0
             })
             $("#resetPasswordBySMSbtn").modal('open');
             timeCountDown();
         } else {
             alert(data.message);
         }
         },
         error: function(XMLHttpRequest, textStatus, errorThrown) {
         if(textStatus=="timeout"){
         alert("请求超时，请检查网络连接设置");
         }
         }
     })
}

function btnSendMsgAgain(){
    timeCountDown();
    $.ajax({
        url: "{:U('forgetPasswordBySMS')}",
        type: "GET",
        async: true,
        data: {username: $("#hiddenUsername-readyToSendMsg").val()},
        dataType: "json",
        timeout: 10000,
        success: function(data){
            if(data.status=='success'){
            } else {
                alert(data.message);
            }
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            if(textStatus=="timeout"){
                alert("请求超时，请检查网络连接设置");
            }
        }
    })
}
var wait=60;
function timeCountDown(){
        if (wait == 0) {
            $("#getVerifyCodeAgain").removeAttr("disabled");
            $("#getVerifyCodeAgain").html("发送验证码");
            wait = 60;
        } else {
            $("#getVerifyCodeAgain").attr("disabled", true);
            $("#getVerifyCodeAgain").html("重新发送(" + wait + ")");
            wait--;
            setTimeout(function() {
                        timeCountDown();
            },1000)
        }
}

[ 技术文章推荐 ]