发送短信倒计时防刷新（二次封装网上短信倒计时防刷新）

最新推荐文章于 2020-05-28 15:01:53 发布

漫步星空ZL

最新推荐文章于 2020-05-28 15:01:53 发布

阅读量478

点赞数

分类专栏： html5 javascript 文章标签：发送短信倒计时防刷新发送短信倒计时

本文链接：https://blog.csdn.net/a13706935773/article/details/80595527

版权

html5 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

javascript

3 篇文章 0 订阅

订阅专栏

源码：

<!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>

<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

漫步星空ZL

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
发送短信倒计时防刷新（二次封装网上短信倒计时防刷新）

源码：&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /&gt; &lt;
复制链接

扫一扫