之前分享過只用js實(shí)現(xiàn)倒計時的功能,后來測試時發(fā)現(xiàn),刷新或關(guān)閉網(wǎng)頁后,倒計時就不能用了.網(wǎng)上也沒找到合適的解決方案,所以自己就寫了個,這次的算是優(yōu)化版吧,能滿足刷新或重新打開網(wǎng)頁后,倒計時依然能用
特別說明:
cookie最初創(chuàng)建的有效時間是60秒.也就是說,你如果在倒計時為20的時候,關(guān)閉網(wǎng)頁.20秒之后再打開,是不會有倒計時顯示的;但是,如果倒計時為20時,關(guān)閉頁面,如果在20秒內(nèi)重新打開頁面,是有倒計時顯示的.
html代碼
<input id="second" type="button" value="免費(fèi)獲取驗(yàn)證碼" />
js對cookie的操作
//發(fā)送驗(yàn)證碼時添加cookiefunction 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; } } }主要邏輯代碼
$(function(){ $("#second").click(function (){ sendCode($("#second")); }); v = getCookieValue("secondsremained");//獲取cookie值 if(v>0){ settime($("#second"));//開始倒計時 }})//發(fā)送驗(yàn)證碼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ī)利用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{//返回驗(yàn)證碼 alert("模擬驗(yàn)證碼:"+d.msg); $("#code").val(d.msg); }}//開始倒計時var countdown;function settime(obj) { countdown=getCookieValue("secondsremained"); if (countdown == 0) { obj.removeAttr("disabled"); obj.val("免費(fèi)獲取驗(yàn)證碼"); return; } else { obj.attr("disabled", true); obj.val("重新發(fā)送(" + countdown + ")"); countdown--; editCookie("secondsremained",countdown,countdown+1); } setTimeout(function() { settime(obj) },1000) //每1000毫秒執(zhí)行一次} //校驗(yàn)手機(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('請輸入有效的手機(jī)號碼!'); return false; }else{ return true; }}以上所述就是本文的全部內(nèi)容了,希望大家能夠喜歡。
新聞熱點(diǎn)
疑難解答