相關閱讀：
基于JS實現發送短信驗證碼后的倒計時功能(無視頁面刷新，頁面關閉不進行倒計時功能)
今天測試提了一個bug，發送短信倒計時功能，要求關閉頁面也要進行倒計時。這想到了，當年我參與的周杰倫演唱會的先付先搶功能。與之類似，只不過，那個項目的時間都是服務器時間，本人目前有點偷懶，就用客戶端的時間了。
一下是完整的代碼，只不過在客戶端的效率不是很好。
<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="Generator" content="EditPlus®"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Description" content=""><title>Document</title><script src="http://cdn.bootcss.com/jquery/3.1.0/jquery.js"></script><script src="http://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script><!--<script src="jquery.min.js"></script>--><!-- <script src="jquery.cookie.js"></script>--><!-- <script src="http://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>--></head><body><input id="phonenum" type="text" value="18518181818"/><input id="second" type="button" value="免費獲取驗證碼" /></body><script>$(function(){$("#second").click(function (){sendCode($("#second"));});checkCountdown();})//校驗打開頁面的時候是否要繼續倒計時function checkCountdown(){var secondsremained = $.cookie("secondsremained");if(secondsremained){var date = new Date(unescape(secondsremained));setCoutDown(date,$("#second"));}}//發送驗證碼function sendCode(obj){var phonenum = $("#phonenum").val();var result = isPhoneNum();if(result){//加載ajax 獲取驗證碼的方法// doPostBack('${base}/login/getCode.htm',backFunc1,{"phonenum":phonenum});var date = new Date();addCookie("secondsremained",date.toGMTString(),60);//添加cookie記錄,有效時間60ssetCoutDown(date,obj);}} var nowDate = null;var time_difference = 0;var count_down = 0;function setCoutDown(date,obj) { nowDate = new Date();time_difference = ((nowDate- date)/1000).toFixed(0);count_down = 60 - time_difference;console.log(count_down);if(count_down<=0){obj.removeAttr("disabled"); obj.val("免費獲取驗證碼"); addCookie("secondsremained","",60);//添加cookie記錄,有效時間60sreturn;}obj.attr("disabled", true); obj.val("重新發送(" + count_down + ")"); setTimeout(function() { setCoutDown(date,obj) },1000) //每1000毫秒執行一次} //發送驗證碼時添加cookiefunction addCookie(name,value,expiresHours){ //判斷是否設置過期時間,0代表關閉瀏覽器時失效if(expiresHours>0){ var date=new Date(); date.setTime(date.getTime()+expiresHours*1000); $.cookie(name, escape(value), {expires: date});}else{$.cookie(name, escape(value));}} //校驗手機號是否合法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></html>以上所述是小編給大家介紹的基于jQuery實現發送短信驗證碼后的倒計時功能(無視頁面關閉)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
