發送短信驗證碼倒計時&&防止刷新

html代碼

<input type="button" id="btn" class="sms-btn" onclick="sendPh()" value='獲取驗證碼' />

js代碼 倒計時
function timekeeping(){
//把按鈕設置爲不可以點擊
$('#btn').attr("disabled", true);
var interval=setInterval(function(){//每秒讀取一次cookie
//從cookie 中讀取剩餘倒計時
total=$.cookie("total"); 存入Cookie 防止頁面刷新
//在發送按鈕顯示剩餘倒計時
$('#btn').val('請等待'+total+'秒');
//把剩餘總倒計時減掉1
total--;
if(total==0){//剩餘倒計時爲零,則顯示 重新發送,可點擊
//清除定時器
clearInterval(interval);
//刪除cookie
total=$.cookie("total",total, { expires: -1 });
//顯示重新發送
$('#btn').val('重新發送');
//把發送按鈕設置爲可點擊
$('#btn').attr("disabled", false);
}else{//剩餘倒計時不爲零
//重新寫入總倒計時
$.cookie("total",total);
}
},1000);
}

function sendPh(){
phone=$('#mobile_phone').val();
$.post(phone_url, {mobile:phone}, function(data, textStatus, xhr) {
$.cookie("total",60);
timekeeping();
});
}

防刷新 html中加入js
<script type="text/javascript">
$(function(){
if($.cookie("total")!=undefined&&$.cookie("total")!='NaN'&&$.cookie("total")!='null'){
timekeeping();
}else{
$('#btn').attr("disabled", false);
}
});
</script>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章