获取短信验证码

点击按钮实现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();