基于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 问答知识整理
Feb 11 Javascript
jQuery让控件左右移动的三种实现方法
Sep 08 Javascript
jQuery trigger()方法用法介绍
Jan 13 Javascript
Jquery中的$.each获取各种返回类型数据的使用方法
May 03 Javascript
快速学习AngularJs HTTP响应拦截器
Dec 31 Javascript
JavaScript的Backbone.js框架的一些使用建议整理
Feb 14 Javascript
JavaScript实现相册弹窗功能(zepto.js)
Jun 21 Javascript
Node.js如何自动审核团队的代码
Jul 20 Javascript
jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
Apr 11 jQuery
基于复选框demo(分享)
Sep 27 Javascript
js获取浏览器地址(获取第1个斜杠后的内容)
Sep 03 Javascript
JavaScript实现音乐导航效果
Nov 19 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生成的html meta和link标记在body标签里 顶部有个空行
2010/05/18 PHP
用PHP提取中英文词语以及数字的首字母的方法介绍
2013/04/23 PHP
基于PHP静态类的原罪详解
2013/05/06 PHP
php获取表单中多个同名input元素的值
2014/03/20 PHP
PHP CURL post数据报错 failed creating formpost data
2016/10/16 PHP
Thinkphp3.2简单解决多文件上传只上传一张的问题
2017/09/26 PHP
ExtJS下 Ext.Direct加载和提交过程排错小结
2013/04/02 Javascript
Jquery实现的一种常用高亮效果示例代码
2014/01/28 Javascript
JS实现判断滚动条滚到页面底部并执行事件的方法
2014/12/18 Javascript
详解jquery事件delegate()的使用方法
2016/01/25 Javascript
微信小程序 使用canvas制作K线实例详解
2017/01/12 Javascript
javascript图片预览和上传(兼容IE)
2017/03/15 Javascript
webpack学习--webpack经典7分钟入门教程
2017/06/28 Javascript
使用vue官方提供的模板vue-cli搭建一个helloWorld案例分析
2018/01/16 Javascript
jQuery动态移除与增加onclick属性的方法详解
2018/06/07 jQuery
Node.js搭建WEB服务器的示例代码
2018/08/15 Javascript
Vue如何基于vue-i18n实现多国语言兼容
2020/07/17 Javascript
Python实现程序的单一实例用法分析
2015/06/03 Python
Python开发网站目录扫描器的实现
2019/02/21 Python
python怎么自定义捕获错误
2020/06/29 Python
Matplotlib animation模块实现动态图
2021/02/25 Python
HTML5 Web Database 数据库的SQL语句的使用方法
2012/12/09 HTML / CSS
三星印度官网:Samsung印度
2019/08/03 全球购物
澳大利亚当地社区首选的光学商店:1001 Optical
2019/08/24 全球购物
英国著名药妆店:Superdrug
2021/02/13 全球购物
纯净、自信、100%的羊绒服装:360Cashmere
2021/02/20 全球购物
教师师德教育的自我评价
2013/10/31 职场文书
个人能力自我鉴赏
2014/01/25 职场文书
yy生日主持词
2014/03/20 职场文书
高一学生评语大全
2014/04/25 职场文书
读书活动总结
2014/04/28 职场文书
红色经典电影观后感
2015/06/18 职场文书
2015年大学组织委员个人工作总结
2015/10/23 职场文书
师德师风心得体会(2016精选篇)
2016/01/12 职场文书
Vue实现tab导航栏并支持左右滑动功能
2021/06/28 Vue.js
源码分析Redis中 set 和 sorted set 的使用方法
2022/03/22 Redis