|
點(diǎn)擊按鈕實(shí)現(xiàn)60秒倒計(jì)時(shí),，并且實(shí)現(xiàn)按鈕不可點(diǎn)擊，60秒之后才可點(diǎn)擊,，以及按鈕的文字改變 第一種場(chǎng)景： // 60秒倒計(jì)時(shí)
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('重新獲取驗(yàn)證碼');
countdown = 60;
}
}, 1000)
}
// cookie的倒計(jì)時(shí)
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); //啟動(dòng)計(jì)時(shí)器，1秒執(zhí)行一次
}
// }
}
function SetRemainTime() {
if (curCount <= 0) {
window.clearInterval(InterValObj); //停止計(jì)時(shí)器
$('#sendCode').attr('disabled', false);
$('#sendCode').removeClass('activeColor');
$('#sendCode').html('重新獲取驗(yàn)證碼');
// $('.valiTig').hide();
} else {
curCount--;
$('#sendCode').attr('disabled', true);
$('#sendCode').addClass('activeColor');
$('#sendCode').html('重新發(fā)送(' curCount ')');
}
} 第二種場(chǎng)景： html文件： <div class='layui-form-item layui-form-item1'>
<label class='layui-form-label'>手機(jī)號(hào)碼</label>
<div class='layui-input-block'>
<input type='tel' name='phone' lay-verify='required|phone' autocomplete='off' class='layui-input' placeholder='請(qǐng)輸入'>
<div class='tips'>請(qǐng)輸入您的手機(jī)號(hào)碼</div>
</div>
</div>
<div class='layui-form-item layui-form-item1'>
<label class='layui-form-label'>驗(yàn)證碼</label>
<div class='layui-input-block'>
<a id='messageBtn' onclick='getNumber()' data-on=0>免費(fèi)獲取短信驗(yàn)證碼</a>
<input type='text' name='code' lay-verify='' autocomplete='off' class='layui-input' id='messageInput'>
<div class='tips'>請(qǐng)輸入短信驗(yàn)證碼</div>
</div>
</div>
js文件： //--獲取短信驗(yàn)證碼-- var getNumber = function(){
var phone = $('input[name='phone']').val();
if(phone == ''){
layer.alert('請(qǐng)先輸入您的手機(jī)號(hào)碼!');
}else{
//--p0為業(yè)務(wù)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('驗(yàn)證碼已發(fā)送,請(qǐng)查收');
if(curCount > 0 ){
return false;
}
curCount = count;
$('#messageBtn').data('on',1);
$('#messageBtn').addClass('layui-btn-disabled').css('background','#f2f2f2');
$('#messageBtn').html( curCount 's后重新獲取');
//--啟動(dòng)計(jì)時(shí)器,，1秒執(zhí)行一次--
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)
}
});
}
}
}
//--短信驗(yàn)證碼倒計(jì)時(shí)--
var SetRemainTime = function SetRemainTime() {
if (curCount <= 0) {
window.clearInterval(InterValObj);
$('#messageBtn').removeClass('layui-btn-disabled').css('background','#d3fce2');
$('#messageBtn').html('重新獲取驗(yàn)證碼');
$('#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后重新獲取');
}
} //--頁(yè)面初始化--
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); //啟動(dòng)計(jì)時(shí)器,，1秒執(zhí)行一次
}
}
}
isMobileTime();
|
