基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)


Posted in Javascript onSeptember 02, 2016

相关阅读:

下面一段代码是小编给大家带来的js发送短信验证码后实现倒计时功能,代码简单易懂。

具体代码如下所示:

<!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="//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>
//发送验证码时添加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));
}
} 
//修改cookie的值
function editCookie(name,value,expiresHours){ 
if(expiresHours>0){ 
var date=new Date(); 
date.setTime(date.getTime()+expiresHours*1000); //单位是毫秒
$.cookie(name, escape(value), {expires: date});
} else{
$.cookie(name, escape(value));
}
} 
//根据名字获取cookie的值
function getCookieValue(name){ 
return $.cookie(name);
}
$(function(){
$("#second").click(function (){
sendCode($("#second"));
});
v = getCookieValue("secondsremained");//获取cookie值
if(v>0){
settime($("#second"));//开始倒计时
}
})
//发送验证码
function sendCode(obj){
var phonenum = $("#phonenum").val();
var result = isPhoneNum();
if(result){
// doPostBack('${base}/login/getCode.htm',backFunc1,{"phonenum":phonenum});
addCookie("secondsremained",60,60);//添加cookie记录,有效时间60s
settime(obj);//开始倒计时
}
}
//开始倒计时
var countdown;
function settime(obj) { 
countdown=getCookieValue("secondsremained");
if (countdown == 0) { 
obj.removeAttr("disabled"); 
obj.val("免费获取验证码"); 
return;
} else { 
obj.attr("disabled", true); 
obj.val("重新发送(" + countdown + ")"); 
countdown--;
editCookie("secondsremained",countdown,countdown+1);
} 
setTimeout(function() { settime(obj) },1000) //每1000毫秒执行一次
} 
//校验手机号是否合法
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>

以上所述是小编给大家介绍的基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery的控件及事件(输入控件及回车事件)使用示例
Jul 25 Javascript
qq悬浮代码(兼容各个浏览器)
Jan 29 Javascript
javascript模拟php函数in_array
Apr 27 Javascript
js查看一个函数的执行时间实例代码
Sep 12 Javascript
javascript实现起伏的水波背景效果
May 16 Javascript
实例讲解JavaScript中instanceof运算符的用法
Jun 08 Javascript
基于JavaScript实现单选框下拉菜单添加文件效果
Jun 26 Javascript
JS基于面向对象实现的选项卡效果示例
Dec 20 Javascript
ECMAScript6 新特性范例大全
Mar 24 Javascript
vue实现的树形结构加多选框示例
Feb 02 Javascript
p5.js码绘“跳动的小正方形”的实现代码
Oct 22 Javascript
基于javascript实现贪吃蛇小游戏
Nov 25 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
vue.js入门教程之计算属性
Sep 01 #Javascript
You might like
PHP 多维数组排序实现代码
2009/08/05 PHP
PHP设计模式之装饰者模式
2012/02/29 PHP
discuz目录文件资料汇总
2014/12/30 PHP
Laravel实现用户注册和登录
2015/01/23 PHP
php多次include后导致全局变量global失效的解决方法
2015/02/28 PHP
php使用Jpgraph绘制饼状图的方法
2015/06/10 PHP
编写PHP脚本使WordPress的主题支持Widget侧边栏
2015/12/14 PHP
PHP list() 将数组中的值赋给变量的简单实例
2016/06/13 PHP
JQuery操作单选按钮以及复选按钮示例
2013/09/23 Javascript
javascript 数字格式化输出的实现代码
2013/12/10 Javascript
JavaScript中的apply和call函数详解
2014/07/20 Javascript
jQuery使用attr()方法同时设置多个属性值用法实例
2015/03/26 Javascript
JavaScript实现复制内容到粘贴板代码
2016/03/31 Javascript
JavaScript 监控微信浏览器且自带返回按钮时间
2016/11/27 Javascript
微信小程序三级联动选择器使用方法
2020/05/19 Javascript
JavaScript中利用Array filter() 方法压缩稀疏数组
2018/02/24 Javascript
浅谈JavaScript 代码整洁之道
2018/10/23 Javascript
Nuxt项目支持eslint+pritter+typescript的实现
2019/05/20 Javascript
typescript nodejs 依赖注入实现方法代码详解
2019/07/21 NodeJs
nodejs环境使用Typeorm连接查询Oracle数据
2019/12/05 NodeJs
十分钟教你上手ES2020新特性
2020/02/12 Javascript
[02:04]完美世界城市挑战赛秋季赛报名开始 谁是solo路人王?
2019/10/10 DOTA
python 使用 requests 模块发送http请求 的方法
2018/12/09 Python
Python使用tkinter模块实现推箱子游戏
2019/10/08 Python
Ranorex通过Python将报告发送到邮箱的方法
2020/01/12 Python
python使用bs4爬取boss直聘静态页面
2020/10/10 Python
澳大利亚自然和有机的健康美容产品一站式商店:Ziani Beauty
2017/12/28 全球购物
维也纳通行证:Vienna PASS
2019/07/18 全球购物
2014政务公开实施方案
2014/02/19 职场文书
应届毕业生自荐书
2014/06/18 职场文书
党员志愿者活动总结
2014/06/26 职场文书
付款承诺函范文
2015/01/21 职场文书
绍兴鲁迅故居导游词
2015/02/09 职场文书
新生开学寄语大全
2015/05/28 职场文书
关于感恩的作文
2019/08/26 职场文书
CSS实现鼠标悬浮动画特效
2023/05/07 HTML / CSS