获取短信验证码 | 易学教程

点击按钮实现60秒倒计时，并且实现按钮不可点击，60秒之后才可点击，以及按钮的文字改变

第一种场景：

// 60秒倒计时
var countdown = 60;
var timer;


function settime(val) {
timer = setInterval(function() {
$('#sendCode').attr('disabled', true);
$('#sendCode').addClass('activeColor');
countdown--;
$('#sendCode').html('重新发送(' countdown ')');
if (countdown == 0) {
clearInterval(timer);
$('#sendCode').attr('disabled', false);
$('#sendCode').removeClass('activeColor');
$('#sendCode').html('重新获取验证码');
countdown = 60;
}
}, 1000)


}


// cookie的倒计时
function getRemailTime(remaintime) {
var timestamp = Date.parse(new Date());
var nowtime = timestamp / 1000;
// if (remaintime) {
var rtime = nowtime - remaintime;
curCount = 60 - rtime;
if (curCount > 0) {
$('#sendCode').attr('disabled', true);
$('#sendCode').addClass('activeColor');
$('#sendCode').html('重新发送(' (60 - rtime) ')');
InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器，1秒执行一次  
}
// }
}




function SetRemainTime() {
if (curCount <= 0) {
window.clearInterval(InterValObj); //停止计时器
$('#sendCode').attr('disabled', false);
$('#sendCode').removeClass('activeColor');
$('#sendCode').html('重新获取验证码');
// $('.valiTig').hide();
} else {
curCount--;
$('#sendCode').attr('disabled', true);
$('#sendCode').addClass('activeColor');
$('#sendCode').html('重新发送(' curCount ')');


}

}

第二种场景：

html文件：

 <div class='layui-form-item layui-form-item1'>
                <label class='layui-form-label'>手机号码</label>
                <div class='layui-input-block'>
                    <input type='tel' name='phone' lay-verify='required|phone' autocomplete='off' class='layui-input' placeholder='请输入'>
                    <div class='tips'>请输入您的手机号码</div>
                </div>
            </div>
            <div class='layui-form-item layui-form-item1'>
                <label class='layui-form-label'>验证码</label>
                <div class='layui-input-block'>
                    <a id='messageBtn' onclick='getNumber()' data-on=0>免费获取短信验证码</a>
                    <input type='text' name='code' lay-verify='' autocomplete='off' class='layui-input' id='messageInput'>
                    <div class='tips'>请输入短信验证码</div>
                </div>
            </div>

js文件：

//--获取短信验证码--

var getNumber = function(){
    var phone = $('input[name='phone']').val();
    if(phone == ''){
        layer.alert('请先输入您的手机号码!');
    }else{
        //--p0为业务id--
        console.log($(this).data('on'))
        if($(this).data('on') == 0){
            getAjax({ 'p0':p0,'p1': 'sendMobile', 'phone': phone}, function(e) {
                if(e.status == 0){
                    $('#messageBtn').parent().find('.tips').show().html('验证码已发送,请查收');
                    if(curCount > 0 ){
                         return false;
                    }
                    curCount = count;
                    $('#messageBtn').data('on',1);
                    $('#messageBtn').addClass('layui-btn-disabled').css('background','#f2f2f2');
                    $('#messageBtn').html( curCount 's后重新获取');
                    //--启动计时器，1秒执行一次--
                    InterValObj = window.setInterval(SetRemainTime, 1000);


                    var cName = $('input[name='name']').val(),
                        cSname = $('input[name='author']').val();


                    milo.cookie.set('phone',phone);
                    milo.cookie.set('mobileTime',e.data);
                }else{
                    layer.alert(e.msg)
                }
            });
        }
    }
}


//--短信验证码倒计时--
var SetRemainTime = function SetRemainTime() {
  if (curCount <= 0) {        
    window.clearInterval(InterValObj);
    $('#messageBtn').removeClass('layui-btn-disabled').css('background','#d3fce2');
    $('#messageBtn').html('重新获取验证码');
    $('#messageBtn').parent().find('.tips').hide();
    $('#messageBtn').data('on',0);
    if(milo.cookie.get('mobileTime')){
       milo.cookie.clear('mobileTime');
       milo.cookie.clear('phone'); 
    }
  }else {
    curCount--;
    $('#messageBtn').html(curCount 's后重新获取');
  }

}

//--页面初始化--
var isMobileTime = function(){
    var remaintime = milo.cookie.get('mobileTime'),
        phoneNum = milo.cookie.get('phone'),
        cName = milo.cookie.get('name'),
        cSname = milo.cookie.get('sname'),
        timestamp = Date.parse(new Date()),
        nowtime = timestamp / 1000;


    if (remaintime) {
        var rtime = remaintime - nowtime;
        curCount =  rtime;


        if (rtime > 0 ) {
            $('input[name='phone']').val(phoneNum);
            $('#messageBtn').html(curCount 's后重新获取');
            $('#messageBtn').data('on',1);
            $('#messageBtn').addClass('layui-btn-disabled').css('background','#f2f2f2');;
            InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器，1秒执行一次  
        }
    }
}


isMobileTime();