源码:
<!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