基于jQuery实现发送短信验证码后的倒计时功能(无
网络编程 2021-07-04 20:00www.168986.cn编程入门
最近做了一个项目,其中有需求要求实现发送短信验证码后倒计时功能,其中有个难点:要求关闭页面也进行倒计时。好吧,狼蚁网站SEO优化长沙网络推广把jquery 发送验证码倒计时的实现代码分享给大家,大家可以参考下
相关阅读:
今天测试提了一个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./jquery/3.1.0/jquery.js"></script> <script src="http://cdn.bootcss./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./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实现发送短信验证码后的倒计时功能(无视页面关闭),希望对大家有所帮助,如果大家有任何疑问请给我留言,长沙网络推广会及时回复大家的。在此也非常感谢大家对狼蚁SEO网站的支持!
上一篇:js绘制购物车抛物线动画
下一篇:基于JS实现发送短信验证码后的倒计时功能(无视
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程