基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)


Posted in Javascript onSeptember 02, 2016

相关阅读:

今天测试提了一个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实现发送短信验证码后的倒计时功能(无视页面关闭),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery中文入门指南,翻译加实例,jQuery的起点教程
Feb 09 Javascript
JS 判断代码全收集
Apr 28 Javascript
Jquery 高亮显示文本中重要的关键字
Dec 24 Javascript
jquery实现带缩略图的全屏图片画廊效果实例
Jun 25 Javascript
Bootstrap Fileinput文件上传组件用法详解
May 10 Javascript
JS实现title标题栏文字不间断滚动显示效果
Sep 07 Javascript
JS实现汉字与Unicode码相互转换的方法详解
Apr 28 Javascript
js字符串与Unicode编码互相转换
May 17 Javascript
vue webpack开发访问后台接口全局配置的方法
Sep 18 Javascript
VUE中使用MUI方法
Feb 12 Javascript
Vue双向数据绑定(MVVM)的原理
Oct 03 Javascript
js实现石头剪刀布游戏
Oct 11 Javascript
基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)
Sep 02 #Javascript
node.js中module.exports与exports用法上的区别
Sep 02 #Javascript
AngularJs Scope详解及示例代码
Sep 01 #Javascript
AngularJs Modules详解及示例代码
Sep 01 #Javascript
AngularJs IE Compatibility 兼容老版本IE
Sep 01 #Javascript
AngularJs 国际化(I18n/L10n)详解
Sep 01 #Javascript
AngularJs Forms详解及简单示例
Sep 01 #Javascript
You might like
用文本文件制作留言板提示(下)
2006/10/09 PHP
PHP flush()与ob_flush()的区别详解
2013/06/03 PHP
php实现cookie加密的方法
2015/03/10 PHP
php文档工具PHP Documentor安装与使用方法
2016/01/25 PHP
Laravel使用支付宝进行支付的示例代码
2017/08/16 PHP
PHP实现基本留言板功能原理与步骤详解
2020/03/26 PHP
同一个表单 根据要求递交到不同页面的实现方法小结
2009/08/05 Javascript
AngularJS快速入门
2015/04/02 Javascript
jQuery实现模拟marquee标签效果
2015/07/14 Javascript
每天一篇javascript学习小结(Function对象)
2015/11/16 Javascript
Bootstrap基本组件学习笔记之导航(10)
2016/12/07 Javascript
原生js封装自定义滚动条
2017/03/24 Javascript
Express URL跳转(重定向)的实现方法
2017/04/07 Javascript
解决浏览器会自动填充密码的问题
2017/04/28 Javascript
微信小程序倒计时功能实现代码
2017/11/09 Javascript
vue-cli脚手架-bulid下的配置文件
2018/03/27 Javascript
详解多页应用 Webpack4 配置优化与踩坑记录
2018/10/16 Javascript
微信小程序实现发送验证码按钮效果
2018/12/20 Javascript
layui table表格数据的新增,修改,删除,查询,双击获取行数据方式
2019/11/14 Javascript
JavaScript实现打砖块游戏
2020/02/25 Javascript
jquery css实现流程进度条
2020/03/26 jQuery
VUE使用axios调用后台API接口的方法
2020/08/03 Javascript
python批量下载图片的三种方法
2013/04/22 Python
Python 使用requests模块发送GET和POST请求的实现代码
2016/09/21 Python
不要用强制方法杀掉python线程
2017/02/26 Python
在Python dataframe中出生日期转化为年龄的实现方法
2018/10/20 Python
python爬虫之urllib,伪装,超时设置,异常处理的方法
2018/12/19 Python
Python Web框架之Django框架文件上传功能详解
2019/08/16 Python
python隐藏类中属性的3种实现方法
2019/12/19 Python
python爬虫构建代理ip池抓取数据库的示例代码
2020/09/22 Python
python实现简单文件读写函数
2021/02/25 Python
Cynthia Rowley官网:全球领先的生活方式品牌
2020/10/27 全球购物
函授本科个人自我鉴定
2014/03/25 职场文书
工作目标责任书
2014/07/23 职场文书
2015年幼儿园班主任个人工作总结
2015/10/22 职场文书
一篇文章带你了解Python和Java的正则表达式对比
2021/09/15 Python