基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)
更新时间：2016年09月02日 09:32:53 投稿：mrr
最近做了一个项目，其中有需求要求实现发送短信验证码后倒计时功能，其中有个难点：要求关闭页面也进行倒计时。好吧，下面小编把jquery 发送验证码倒计时的实现代码分享给大家，大家可以参考下
相关阅读：
基于JS实现发送短信验证码后的倒计时功能(无视页面刷新，页面关闭不进行倒计时功能)
今天测试提了一个bug，发送短信倒计时功能，要求关闭页面也要进行倒计时。这想到了，当年我参与的周杰伦演唱会的先付先抢功能。与之类似，只不过，那个项目的时间都是服务器时间，本人目前有点偷懒，就用客户端的时间了。
一下是完整的代码，只不过在客户端的效率不是很好。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<script src="http://cdn.bootcss.com/jquery/3.1.0/jquery.js"></script>
<script src="http://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>
<!--<script src="jquery.min.js"></script>-->
<!-- <script src="jquery.cookie.js"></script>-->
<!-- <script src="//cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>-->
</head>
<body>
<input id="phonenum" type="text" value="18518181818"/>
<input id="second" type="button" value="免费获取验证码" />
</body>
<script>
$(function(){
$("#second").click(function (){
sendCode($("#second"));
});
checkCountdown();
})
//校验打开页面的时候是否要继续倒计时
function checkCountdown(){
var secondsremained = $.cookie("secondsremained");
if(secondsremained){
var date = new Date(unescape(secondsremained));
setCoutDown(date,$("#second"));
}
}
//发送验证码
function sendCode(obj){
var phonenum = $("#phonenum").val();
var result = isPhoneNum();
if(result){
//加载ajax 获取验证码的方法
// doPostBack('${base}/login/getCode.htm',backFunc1,{"phonenum":phonenum});
var date = new Date();
addCookie("secondsremained",date.toGMTString(),60);//添加cookie记录,有效时间60s
setCoutDown(date,obj);
}
}
var nowDate = null;
var time_difference = 0;
var count_down = 0;
function setCoutDown(date,obj) {
nowDate = new Date();
time_difference = ((nowDate- date)/1000).toFixed(0);
count_down = 60 - time_difference;
console.log(count_down);
if(count_down<=0){
obj.removeAttr("disabled");
obj.val("免费获取验证码");
addCookie("secondsremained","",60);//添加cookie记录,有效时间60s
return;
}
obj.attr("disabled", true);
obj.val("重新发送(" + count_down + ")");
setTimeout(function() { setCoutDown(date,obj) },1000) //每1000毫秒执行一次
}
//发送验证码时添加cookie
function addCookie(name,value,expiresHours){
//判断是否设置过期时间,0代表关闭浏览器时失效
if(expiresHours>0){
var date=new Date();
date.setTime(date.getTime()+expiresHours*1000);
$.cookie(name, escape(value), {expires: date});
}else{
$.cookie(name, escape(value));
}
}
//校验手机号是否合法
function isPhoneNum(){
var phonenum = $("#phonenum").val();
var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
if(!myreg.test(phonenum)){
alert('请输入有效的手机号码！');
return false;
}else{
return true;
}
}
</script>
</html>
以上所述是小编给大家介绍的基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
这篇文章主要介绍了jquery实现LED广告牌旋转系统图片切换效果类似路边场景，很实用的代码，推荐给大家，有需要的小伙伴可以参考下。2015-08-08
这篇文章主要介绍了Validform验证时可以为空否则按照指定格式验证的相关资料,需要的朋友可以参考下2017-10-10
在前台的表格中单击单元格便可修改其中的内容，回车键保存修改的内容，esc撤销保存的内容2014-05-05
一直不是很清楚filter()方法和find()方法的区别，看jQuery Cookbook一书后，终于算是搞清楚了，下面将新的与大家分享下2013-09-09
这篇文章主要介绍了Jquery中map函数的用法的相关资料，map()这个函数可以用在不同的地方，非常实用，感兴趣的朋友参考下吧2016-06-06
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
这篇文章主要介绍了jQuery简单实现的HTML页面文本框模糊匹配查询功能,涉及jQuery事件响应模拟列表框的下拉数据展示与隐藏,以及元素遍历、匹配等相关操作技巧,需要的朋友可以参考下2018-05-05
这篇文章主要介绍了jQuery插件dataTables添加序号列的方法的相关资料,需要的朋友可以参考下2016-07-07
jQuery动画效果-slideUp slideDown上下滑动示例代码
jQuery动画上下滑动效果在网页中的应用还是比较广泛的，其实很简单通过slideUp slideDown方法便可轻松实现，具体如下，喜欢的朋友可以参考下，希望对大家学习jquery有所帮助2013-08-08
这篇文章主要给大家推荐8款jQuery轻量级树形Tree插件,需要的朋友可以参考下2014-11-11
这篇文章主要介绍了IE10中flexigrid无法显示数据的解决方法的相关资料,需要的朋友可以参考下2015-07-07
最新评论