1. 程式人生 > >傳送簡訊倒計時防重新整理(二次封裝網上簡訊倒計時防重新整理)

傳送簡訊倒計時防重新整理(二次封裝網上簡訊倒計時防重新整理)

原始碼:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title></title>
<link rel="stylesheet" href="js/layer_mobile/need/layer.css" />
<script type="text/javascript" src="js/layer_mobile/layer.js"></script>
<!--引入jquery.cookie.js 外掛-->
<script type="text/javascript" src="js/jquery.1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
</head>
<body>
<input type="button" id="btn" disabled="disabled" value="獲取驗證碼">
</div>
<!--邏輯功能程式碼 -->
<script>
$(function() {
var timerCount = new TimerCount({
selector:"#btn"
})
//繫結傳送按鈕
$('#btn').click(function(event) {
timerCount.send({
time:15
});
})
})

/**
* options:配置  型別Object
* options.selector 節點選擇器(例:"#btn") 注:節點必須為input的button型別
* timekeeping 倒計時操作
* send(obj) 開始倒計時 obj物件可設定提示及傳送時間,如不設定則不傳obj
* hasCount 判斷計時是否結束
*/
function TimerCount(options){
var self = this;
self.timekeeping = function(){
$(options.selector).attr("disabled", true);
var interval = setInterval(function() { //每秒讀取一次cookie
//從cookie 中讀取剩餘倒計時
total = $.cookie("total");
//在傳送按鈕顯示剩餘倒計時
$(options.selector).val('請等待' + total + '秒');
//把剩餘總倒計時減掉1
total--;
if(total == 0) { //剩餘倒計時為零,則顯示 重新發送,可點選
//清除定時器
clearInterval(interval);
//刪除cookie
total = $.cookie("total", total, {
expires: -1
});
//顯示重新發送
$(options.selector).val('重新發送');
//把傳送按鈕設定為可點選
$(options.selector).attr("disabled", false);
} else { //剩餘倒計時不為零
//重新寫入總倒計時
$.cookie("total", total);
}
}, 1000);
}
self.send = function(obj){
var init_obj = {
str:"傳送簡訊驗證碼成功,請注意檢視您的手機",
time:60
}
var mess_obj = $.extend({},init_obj,obj);
$.cookie("total", mess_obj.time);
self.timekeeping();
layer.open({
content: mess_obj.str,
time: 2
});
}
var hasCount = function(){
if($.cookie("total")) { //cookie存在倒計時
self.timekeeping();
} else {
$(options.selector).attr("disabled", false);
}
}()
}
</script>
</body>
</html>

原始碼例子下載:

連結:https://pan.baidu.com/s/1rOpSXxxQuXay8vREEcMjuA 密碼:y4rg