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

