基于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对象数据缓存Cache原理及jQuery.data方法区别介绍
Apr 07 Javascript
Js放到HTML文件中的哪个位置有什么区别
Aug 21 Javascript
js检测输入内容全为空格的方法
May 03 Javascript
js实现同一页面可多次调用的图片幻灯切换效果
Feb 28 Javascript
如何使用HTML5地理位置定位功能
Apr 27 Javascript
介绍JavaScript中Math.abs()方法的使用
Jun 14 Javascript
javascript 作用于作用域链的详解
Sep 27 Javascript
node.js学习之断言assert的使用示例
Sep 28 Javascript
node.js使用redis储存session的方法
Sep 26 Javascript
js通过循环多张图片实现动画效果
Dec 19 Javascript
vue 手机物理监听键+退出提示代码
Sep 09 Javascript
js+h5 canvas实现图片验证码
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
一个PHP二维数组排序的函数分享
2014/01/17 PHP
PHP命令行脚本接收传入参数的三种方式
2014/08/20 PHP
一个非常完美的读写ini格式的PHP配置类分享
2015/02/12 PHP
php实现比较两个文件夹异同的方法
2015/06/18 PHP
PHP Imagick完美实现图片裁切、生成缩略图、添加水印
2016/02/22 PHP
php中10个不同等级压缩优化图片操作示例
2016/11/14 PHP
JavaScript null和undefined区别分析
2009/10/14 Javascript
jQuery队列操作方法实例
2014/06/11 Javascript
详解JavaScript的Date对象(制作简易钟表)
2020/04/07 Javascript
AngularJS中的包含详细介绍及实现示例
2016/07/28 Javascript
Laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值的解决方法
2016/08/18 Javascript
JS刷新父窗口的几种方式小结(推荐)
2016/11/09 Javascript
Windows下快速搭建NodeJS本地服务器的步骤
2017/08/09 NodeJs
详解vue-cli项目中用json-sever搭建mock服务器
2017/11/02 Javascript
JavaScript fetch接口案例解析
2018/08/30 Javascript
如何通过setTimeout理解JS运行机制详解
2019/03/23 Javascript
详解小程序开发经验:多页面数据同步
2019/05/18 Javascript
使用 webpack 插件自动生成 vue 路由文件的方法
2019/08/20 Javascript
js中apply和call的理解与使用方法
2019/11/27 Javascript
Python中max函数用于二维列表的实例
2018/04/03 Python
使用python进行文本预处理和提取特征的实例
2018/06/05 Python
详解Django+uwsgi+Nginx上线最佳实战
2019/03/14 Python
基于Django的乐观锁与悲观锁解决订单并发问题详解
2019/07/31 Python
python实现WebSocket服务端过程解析
2019/10/18 Python
PyCharm2019.3永久激活破解详细图文教程,亲测可用(不定期更新)
2020/10/29 Python
HTML5 embed标签定义和用法详解
2014/05/09 HTML / CSS
体育教育专业自荐信范文
2013/12/20 职场文书
2013年研究生毕业感言
2014/02/06 职场文书
食品安全承诺书
2014/05/22 职场文书
初中生旷课检讨书范文
2014/10/06 职场文书
党的群众路线教育实践活动自我剖析材料
2014/10/08 职场文书
先进教师个人事迹材料
2014/12/15 职场文书
2015年党员创先争优承诺书
2015/01/22 职场文书
调任通知
2015/04/21 职场文书
Python上下文管理器Content Manager
2021/06/26 Python
关于JavaScript轮播图的实现
2021/11/20 Javascript