我們在網站(zhàn)建設中，比喻會員(yuán)注冊等需要用到的發送手機(jī)驗證碼倒計(jì)時效果，具體(tǐ)請(qǐng)看(kàn)如(rú)下：

第一種：普通效果，刷新頁面倒計(jì)時失效

<script type="text/javascript">  

var InterValObj; //timer變量，控制時間  

var count = 120; //間隔函數，1秒執行  

var curCount;//當前剩餘秒數  

function sendMessage() {  

    curCount = count;  

    var phone=$("#mob").val();//手機(jī)号碼  

    if(phone != ""){  

        //産生(shēng)驗證碼  

        //設置button效果，開始計(jì)時  

        $("#btnSendCode").attr("disabled", "true");  

        $("#btnSendCode").val(curCount + "秒後可(kě)重發驗證碼");  

        InterValObj = window.setInterval(SetRemainTime, 1000); //啓動計(jì)時器，1秒執行一次  

    //向後台發送處理(lǐ)數據  

        $.ajax({  

            type: "POST", //用POST方式傳輸  

            dataType: "text", //數據格式:JSON  

            url: 'error404.html', //目标地址  

            data: "phone=" + phone,  

            error: function (XMLHttpRequest, textStatus, errorThrown) { },  

            success: function (msg){ 

//alert(msg);

}  

        });  

    }else{  

        alert("手機(jī)号碼不能爲空！");  

    }  

}  

//timer處理(lǐ)函數  

function SetRemainTime() {  

    if (curCount == 0) {                  

        window.clearInterval(InterValObj);//停止計(jì)時器  

        $("#btnSendCode").removeAttr("disabled");//啓用按鈕  

        $("#btnSendCode").val("重新發送驗證碼");  

        code = ""; //清除驗證碼。如(rú)果不清除，過時間後，輸入收到的驗證碼依然有效      

    }  

    else {  

        curCount--;  

        $("#btnSendCode").val(curCount + "秒後可(kě)重發驗證碼");  

    }  

}  

</script> 

<input type='text' name='mob' id="mob">

<input id="btnSendCode" type="button" value="發送驗證碼" onclick="sendMessage()" />

<input type='text' name='mobcode' class='inputxt' datatype='*' nullmsg='手機(jī)驗證碼不能留空！'>

第二種：使用js操作(zuò)cookie實現防頁面刷新

<input id="second" type="button"  value="免費獲取驗證碼"  />

<script>

//發送驗證碼時添加cookie

function addCookie(name,value,expiresHours){ 

    var cookieString=name+"="+escape(value); 

    //判斷是否設置過期時間,0代表關閉浏覽器時失效

    if(expiresHours>0){ 

        var date=new Date(); 

        date.setTime(date.getTime()+expiresHours*1000); 

        cookieString=cookieString+";expires=" + date.toUTCString(); 

    } 

        document.cookie=cookieString; 

} 

//修改cookie的值

function editCookie(name,value,expiresHours){ 

    var cookieString=name+"="+escape(value); 

    if(expiresHours>0){ 

      var date=new Date(); 

      date.setTime(date.getTime()+expiresHours*1000); //單位是毫秒

      cookieString=cookieString+";expires=" + date.toGMTString(); 

    } 

      document.cookie=cookieString; 

} 

//根據名字獲取cookie的值

function getCookieValue(name){ 

      var strCookie=document.cookie; 

      var arrCookie=strCookie.split("; "); 

      for(var i=0;i<arrCookie.length;i++){ 

        var arr=arrCookie[i].split("="); 

        if(arr[0]==name){

          return unescape(arr[1]);

          break;

        }else{

             return ""; 

             break;

         } 

      } 

}

/*業務邏輯*/

$(function(){

    $("#second").click(function (){

        sendCode($("#second"));

    });

    //v = getCookieValue("secondsremained");//獲取cookie值

v = getCookieValue("secondsremained")?getCookieValue("secondsremained"):0;//獲取cookie值

    if(v>0){

        settime($("#second"));//開始倒計(jì)時

    }

})

//發送驗證碼

function sendCode(obj){

    var phonenum = $("#phonenum").val();

    var result = isPhoneNum();

    if(result){

        doPostBack('${base}/login/getCode.htm',backFunc1,{"phonenum":phonenum});

        addCookie("secondsremained",60,60);//添加cookie記錄,有效時間60s

        settime(obj);//開始倒計(jì)時

    }

}

//将手機(jī)利用ajax提交到後台的發短(duǎn)信接口

function doPostBack(url,backFunc,queryParam) {

    $.ajax({

        async : false,

        cache : false,

        type : 'POST',

        url : url,// 請(qǐng)求的action路(lù)徑

        data:queryParam,

        error : function() {// 請(qǐng)求失敗處理(lǐ)函數

        },

        success : backFunc

    });

}

function backFunc1(data){

    var d = $.parseJSON(data);

    if(!d.success){

        alert(d.msg);

    }else{//返回驗證碼

        alert("模拟驗證碼:"+d.msg);

        $("#code").val(d.msg);

    }

}

//開始倒計(jì)時

var countdown;

function settime(obj) { 

    countdown=getCookieValue("secondsremained");

    if (countdown == 0) { 

        obj.removeAttr("disabled");    

        obj.val("免費獲取驗證碼"); 

        return;

    } else { 

        obj.attr("disabled", true); 

        obj.val("重新發送(" + countdown + ")"); 

        countdown--;

        editCookie("secondsremained",countdown,countdown+1);

    } 

    setTimeout(function() { settime(obj) },1000) //每1000毫秒執行一次

} 

//校(xiào)驗手機(jī)号是否合法

function isPhoneNum(){

    var phonenum = $("#phonenum").val();

    var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/; 

    if(!myreg.test(phonenum)){ 

        alert('請(qǐng)輸入有效的手機(jī)号碼！'); 

        return false; 

    }else{

        return true;

    }

}

</script>

第三種：使用localStorage存儲驗證碼，實現防止頁面刷新

//業務邏輯

<script>

            $(function() {

                var btn = document.getElementById("btn-getcode");

                //調用監聽

                monitor($(btn));

                //點擊click

                btn.onclick = function() {

                    //倒計(jì)時效果  getCode回調函數  獲取驗證碼api

                    countDown($(this), getCode);

                };

                function getCode() {

                    $.get("http://192.168.50.242:8080/demo/js/json.json", {}, function(res) {

                        if (res.code == 000) {

                            console.log("驗證碼将發送到你(nǐ)手機(jī)");

                        } else {

                            alert(res.message);

                        }

                    });

                }

            });

        </script>

//功能實現

/**

 * 

 * @param {Object} obj  獲取驗證碼按鈕

 */

function monitor(obj) {

    var LocalDelay = getLocalDelay();

    var timeLine = parseInt((new Date().getTime() - LocalDelay.time) / 1000);

    if (timeLine > LocalDelay.delay) {

        console.log("過期");

    } else {

        _delay = LocalDelay.delay - timeLine;

        obj.text(_delay).addClass("btn-disabled");

        var timer = setInterval(function() {

            if (_delay > 1) {

                _delay--;

                obj.text(_delay);

                setLocalDelay(_delay);

            } else {

                clearInterval(timer);

                obj.text("獲取驗證碼").removeClass("btn-disabled");

            }

        }, 1000);

    }

};

//倒計(jì)時效果

/**

 * 

 * @param {Object} obj 獲取驗證碼按鈕

 * @param {Function} callback  獲取驗證碼接口函數

 */

function countDown(obj, callback) {

    if (obj.text() == "獲取驗證碼") {

        var _delay = 60;

        var delay = _delay;

        obj.text(_delay).addClass("btn-disabled");

        var timer = setInterval(function() {

            if (delay > 1) {

                delay--;

                obj.text(delay);

                setLocalDelay(delay);

            } else {

                clearInterval(timer);

                obj.text("獲取驗證碼").removeClass("btn-disabled");

            }

        }, 1000);

        callback();

    } else {

        return false;

    }

}

//設置setLocalDelay

function setLocalDelay(delay) {

    //location.href作(zuò)爲頁面的唯一标識，可(kě)能一個項目中會有很多頁面需要獲取驗證碼。

    localStorage.setItem("delay_" + location.href, delay);

    localStorage.setItem("time_" + location.href, new Date().getTime());

}

//getLocalDelay()

function getLocalDelay() {

    var LocalDelay = {};

    LocalDelay.delay = localStorage.getItem("delay_" + location.href);

    LocalDelay.time = localStorage.getItem("time_" + location.href);

    return LocalDelay;

}

文章(zhāng)引用：

本站(zhàn)文章(zhāng)爲深圳網站(zhàn)建設·源美網絡原創策劃，如(rú)有版權糾紛或者違規問(wèn)題，請(qǐng)聯系我們删除，謝謝！