JS實現(xiàn)發(fā)送短信驗證后按鈕倒計時功能(防止刷新倒計時失效)
應(yīng)用場景
在開發(fā)“發(fā)送短信驗證”功能時候,要解決一個問題,防止惡意或頻繁發(fā)送短信驗證碼問題。一般原理是“當(dāng)點擊發(fā)送按鈕時,發(fā)送ajax請求到服務(wù)器發(fā)送短信驗證碼,成功則把發(fā)送按鈕設(shè)置為不可點擊,并且調(diào)用定時器,按鈕顯示倒計時”。如果就這樣不對倒計時存儲做處理,那么當(dāng)刷新頁面,會出現(xiàn)倒計時失效,按鈕可點擊。提供以下解決方案:
- 利用cookie存儲倒計時
- 利用HTML5的localStorage 存儲倒計時
利用cookie存儲倒計時
發(fā)送成功后把剩余倒計時存儲到cookie,當(dāng)頁面刷新時,檢查cookie 是否還存儲著剩余倒計時?,如果有,發(fā)送按鈕則保持倒計時狀態(tài),不可點擊,否則發(fā)送按鈕可點擊。
HTML代碼
<input type="button" id="btn" disabled="disabled" value="獲取驗證碼">
jQuery代碼
<!--引入jquery.cookie.js 插件--> <script src="http:jquery.cookie.js" type="text/javascript" charset="utf-8"></script> <!--邏輯功能代碼 --> <script> $(function(){ if($.cookie("total")!=undefined&&$.cookie("total")!='NaN'&&$.cookie("total")!='null'){//cookie存在倒計時 timekeeping(); }else{//cookie 沒有倒計時 $('#btn').attr("disabled", false); } function timekeeping(){ //把按鈕設(shè)置為不可以點擊 $('#btn').attr("disabled", true); var interval=setInterval(function(){//每秒讀取一次cookie //從cookie 中讀取剩余倒計時 total=$.cookie("total"); //在發(fā)送按鈕顯示剩余倒計時 $('#btn').val('請等待'+total+'秒'); //把剩余總倒計時減掉1 total--; if(total==0){//剩余倒計時為零,則顯示 重新發(fā)送,可點擊 //清除定時器 clearInterval(interval); //刪除cookie total=$.cookie("total",total, { expires: -1 }); //顯示重新發(fā)送 $('#btn').val('重新發(fā)送'); //把發(fā)送按鈕設(shè)置為可點擊 $('#btn').attr("disabled", false); }else{//剩余倒計時不為零 //重新寫入總倒計時 $.cookie("total",total); } },1000); } //綁定發(fā)送按鈕 $('#btn').click(function(event) { /* Act on the event */ // alert($("#btn").val()); //校驗手機號碼 var phone=$('#phone').val(); var pre=/^[1][358][0-9]{9}$/; if(phone==''){ layer.open({ content: '手機號碼不能為空', time: 2 }); return this; }else{ var pre=/^[1][358][0-9]{9}$/; if(!pre.test(phone)){ layer.open({ content: '手機號碼格式有誤!', time: 2 }); return this; } } $.ajax({ url: '',//服務(wù)器發(fā)送短信 type: 'GET', dataType: 'json', data: {phone: phone}, }) .done(function(re) { var str="發(fā)送短信驗證碼成功,請注意查看您的手機"; // console.log(re); if(re){ $.cookie("total",60); timekeeping(); }else{ switch (re[0]) { case '160038': str="短信驗證碼發(fā)送過頻繁"; break; case '160034': str="號碼黑名單"; break; case '160000': str="系統(tǒng)錯誤"; break; case '000000': str="發(fā)送成功"; break; case '112300': str="接收短信的手機號碼為空"; break; case '160040': str="驗證碼超出發(fā)送上限"; break; case '160042': str="號碼格式有誤"; break; default: str="發(fā)送驗證碼失敗"; break; } } layer.open({ content: str, time: 2 }); }) .fail(function() { console.log("error"); }) .always(function() { console.log("complete"); }); }); }) </script>
以上所述是小編給大家介紹的JS實現(xiàn)發(fā)送短信驗證后按鈕倒計時功能(防止刷新倒計時失效),希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
window.addeventjs事件驅(qū)動函數(shù)集合addEvent等
addEvent()、removeEvent()、handleEvent()、fixEvent()[2008-02-02PHP自動加載autoload和命名空間的應(yīng)用小結(jié)
PHP的自動加載就是我們加載實例化類的時候,不需要手動去寫require來導(dǎo)入這個class.php文件,程序自動幫我們加載導(dǎo)入進來這.篇文章主要介紹了PHP自動加載autoload和命名空的應(yīng)用,需要的朋友可以參考下2017-12-12JS提示:Uncaught SyntaxError: Unexpected token ILLEGAL錯誤的解決方法
這篇文章主要介紹了JS提示:Uncaught SyntaxError: Unexpected token ILLEGAL錯誤的解決方法,涉及針對字符串參數(shù)的處理方法,需要的朋友可以參考下2016-08-08