我們在網(wǎng)站建設(shè)中，比喻會員注冊等需要用到的發(fā)送手機驗證碼倒計時效果，具體請看如下：

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

<script type="text/javascript">  

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

var count = 120; //間隔函數(shù)，1秒執(zhí)行  

var curCount;//當(dāng)前剩余秒數(shù)  

function sendMessage() {  

    curCount = count;  

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

    if(phone != ""){  

        //產(chǎn)生驗證碼  

        //設(shè)置button效果，開始計時  

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

        $("#btnSendCode").val(curCount + "秒后可重發(fā)驗證碼");  

        InterValObj = window.setInterval(SetRemainTime, 1000); //啟動計時器，1秒執(zhí)行一次  

    //向后臺發(fā)送處理數(shù)據(jù)  

        $.ajax({  

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

            dataType: "text", //數(shù)據(jù)格式:JSON  

            url: '/pims/send.php', //目標(biāo)地址  

            data: "phone=" + phone,  

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

            success: function (msg){ 

//alert(msg);

}  

        });  

    }else{  

        alert("手機號碼不能為空！");  

    }  

}  

//timer處理函數(shù)  

function SetRemainTime() {  

    if (curCount == 0) {                  

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

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

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

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

    }  

    else {  

        curCount--;  

        $("#btnSendCode").val(curCount + "秒后可重發(fā)驗證碼");  

    }  

}  

</script> 

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

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

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

第二種：使用js操作cookie實現(xiàn)防頁面刷新

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

<script>

//發(fā)送驗證碼時添加cookie

function addCookie(name,value,expiresHours){ 

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

    //判斷是否設(shè)置過期時間,0代表關(guān)閉瀏覽器時失效

    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; 

} 

//根據(jù)名字獲取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;

         } 

      } 

}

/*業(yè)務(wù)邏輯*/

$(function(){

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

        sendCode($("#second"));

    });

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

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

    if(v>0){

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

    }

})

//發(fā)送驗證碼

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);//開始倒計時

    }

}

//將手機利用ajax提交到后臺的發(fā)短信接口

function doPostBack(url,backFunc,queryParam) {

    $.ajax({

        async : false,

        cache : false,

        type : 'POST',

        url : url,// 請求的action路徑

        data:queryParam,

        error : function() {// 請求失敗處理函數(shù)

        },

        success : backFunc

    });

}

function backFunc1(data){

    var d = $.parseJSON(data);

    if(!d.success){

        alert(d.msg);

    }else{//返回驗證碼

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

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

    }

}

//開始倒計時

var countdown;

function settime(obj) { 

    countdown=getCookieValue("secondsremained");

    if (countdown == 0) { 

        obj.removeAttr("disabled");    

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

        return;

    } else { 

        obj.attr("disabled", true); 

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

        countdown--;

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

    } 

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

} 

//校驗手機號是否合法

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('請輸入有效的手機號碼！'); 

        return false; 

    }else{

        return true;

    }

}

</script>

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

//業(yè)務(wù)邏輯

<script>

            $(function() {

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

                //調(diào)用監(jiān)聽

                monitor($(btn));

                //點擊click

                btn.onclick = function() {

                    //倒計時效果  getCode回調(diào)函數(shù)  獲取驗證碼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("驗證碼將發(fā)送到你手機");

                        } else {

                            alert(res.message);

                        }

                    });

                }

            });

        </script>

//功能實現(xiàn)

/**

 * 

 * @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);

    }

};

//倒計時效果

/**

 * 

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

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

 */

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;

    }

}

//設(shè)置setLocalDelay

function setLocalDelay(delay) {

    //location.href作為頁面的唯一標(biāo)識，可能一個項目中會有很多頁面需要獲取驗證碼。

    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;

}

文章引用：http://www.lt-ad.com/new/192.html

本站文章為深圳網(wǎng)站建設(shè)·源美網(wǎng)絡(luò)原創(chuàng)策劃，如有版權(quán)糾紛或者違規(guī)問題，請聯(lián)系我們刪除，謝謝！