相關閱讀:
基於jQuery實現發送短信驗證碼後的倒計時功能(無視頁面關閉)
下面一段代碼是小編給大家帶來的js發送短信驗證碼後實現倒計時功能,代碼簡單易懂。
具體代碼如下所示:
<!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="//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> //發送驗證碼時添加cookie function 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)); } } //修改cookie的值 function editCookie(name,value,expiresHours){ if(expiresHours>0){ var date=new Date(); date.setTime(date.getTime()+expiresHours*1000); //單位是毫秒 $.cookie(name, escape(value), {expires: date}); } else{ $.cookie(name, escape(value)); } } //根據名字獲取cookie的值 function getCookieValue(name){ return $.cookie(name); } $(function(){ $("#second").click(function (){ sendCode($("#second")); }); v = getCookieValue("secondsremained");//獲取cookie值 if(v>0){ settime($("#second"));//開始倒計時 } }) //發送驗證碼 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);//開始倒計時 } } //開始倒計時 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毫秒執行一次 } //校驗手機號是否合法 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>
以上所述是小編給大家介紹的基於JS實現發送短信驗證碼後的倒計時功能(無視頁面刷新,頁面關閉不進行倒計時功能),希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對網站的支持!