相关阅读：
基于JS实现发送短信验证码后的倒计时功能(无视页面刷新，页面关闭不进行倒计时功能)
今天测试提了一个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记录,有效时间60ssetCoutDown(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记录,有效时间60sreturn;}obj.attr("disabled", true); obj.val("重新发送(" + count_down + ")"); setTimeout(function() { setCoutDown(date,obj) },1000) //每1000毫秒执行一次} //发送验证码时添加cookiefunction 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实现发送短信验证码后的倒计时功能(无视页面关闭)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对武林网网站的支持！
新闻热点
疑难解答
