點擊按鈕實現(xiàn)60秒倒計時,并且實現(xiàn)按鈕不可點擊,60秒之后才可點擊,以及按鈕的文字改變
第一種場景:
// 60秒倒計時
var countdown = 60;
var timer;
function settime(val) {
timer = setInterval(function() {
$('#sendCode').attr('disabled', true);
$('#sendCode').addClass('activeColor');
countdown--;
$('#sendCode').html('重新發(fā)送(' 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('重新發(fā)送(' (60 - rtime) ')');
InterValObj = window.setInterval(SetRemainTime, 1000); //啟動計時器,1秒執(zhí)行一次
}
// }
}
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('重新發(fā)送(' curCount ')');
}
}
第二種場景:
html文件:
<div class='layui-form-item layui-form-item1'>
<label class='layui-form-label'>手機(jī)號碼</label>
<div class='layui-input-block'>
<input type='tel' name='phone' lay-verify='required|phone' autocomplete='off' class='layui-input' placeholder='請輸入'>
<div class='tips'>請輸入您的手機(jī)號碼</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 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秒執(zhí)行一次
}
}
}
isMobileTime();