免费视频淫片aa毛片_日韩高清在线亚洲专区vr_日韩大片免费观看视频播放_亚洲欧美国产精品完整版

打開APP
userphoto
未登錄

開通VIP,暢享免費電子書等14項超值服

開通VIP
獲取短信驗證碼 | 易學(xué)教程

點擊按鈕實現(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 phone = $('input[name='phone']').val();
    if(phone == ''){
        layer.alert('請先輸入您的手機(jī)號碼!');
    }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('驗證碼已發(fā)送,請查收');
                    if(curCount > 0 ){
                         return false;
                    }
                    curCount = count;
                    $('#messageBtn').data('on',1);
                    $('#messageBtn').addClass('layui-btn-disabled').css('background','#f2f2f2');
                    $('#messageBtn').html( curCount 's后重新獲取');
                    //--啟動計時器,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)
                }
            });
        }
    }
}


//--短信驗證碼倒計時--
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秒執(zhí)行一次  
        }
    }
}


isMobileTime();

本站僅提供存儲服務(wù),所有內(nèi)容均由用戶發(fā)布,如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請點擊舉報
打開APP,閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
LAYUI -下拉多選效果
前端學(xué)習(xí)-學(xué)生成績信息管理html+js實現(xiàn)
30分鐘內(nèi)搞定 50張表的 CRUD,666!
除了密碼以外表單里的其他的數(shù)值都能取到,不知道為什么
layui獲取彈窗table選中值
layui table 可編輯單元格 JS實現(xiàn)通過鍵盤上下左右鍵 光標(biāo)焦點移動到旁邊的編輯行/列
更多類似文章 >>
生活服務(wù)
分享 收藏 導(dǎo)長圖 關(guān)注 下載文章
綁定賬號成功
后續(xù)可登錄賬號暢享VIP特權(quán)!
如果VIP功能使用有故障,
可點擊這里聯(lián)系客服!

聯(lián)系客服