html页面基于ajax按钮60秒倒计时
2017-04-21 10:40
260 查看
<html> <head> <meta charset="UTF-8"> <title>基于ajax按钮动态刷新倒计时</title> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquery.cookie.js"></script> <script type="text/javascript"> var count = 60;//声明全局变量 $(function(){ var starttime = $.cookie("registertime");//取上次点击按钮发送验证码的时间 if(starttime){//判断是否在该浏览器点击过该按钮 var curtime = new Date().format("yyyyMMddhhmmss");//得到当前时间 var timegaps = timecha(curtime,starttime);//得到上次点击按钮和这次加载页面的时间差(秒) if(timegaps<60){ count=60-timegaps;//改变count初始值 buttclick();//调用按钮点击事件函数 } } }); //按钮点击事件 function buttclick(){ if(count == 60){//只有计数等于60时才会调用ajax $.ajax({ url:'index.html', type:'post',//get async:true,//false是否异步 data:{name:'mingming',age:25},//json格式对象 timeout:5000,//设置超时时间 dataType:'json',//返回的数据格式类型json/xml/html/script/jsonp/text beforeSend:function(xhr){ console.log(xhr) console.log('发送前') }, success:function(data,textStatus,jqXHR){ $.cookie("registertime",new Date().format("yyyyMMddhhmmss"));//把请求成功的时间设置为上次请求的时间 console.log(textStatus);//在前端控制台打印请求的状态 console.log(data);//在控制台打印当前的数据 }, error:function(xhr,textStatus){ console.log(textStatus);//在前端控制台打印请求的状态 }, complete:function(){ console.log('结束') } }); } var obj=$("#butt");//设置按钮上面的字 if(count==0){ obj.attr("disabled",false); obj.html("免费获取验证码"); count=60; return; }else{ obj.attr("disabled", true); obj.html("重新发送(" + count +"s"+ ")"); count--; } setTimeout(function(){buttclick()},1000)//仔细一看 这还是js版递归,每一秒钟调用自己一次 } //计算出时间差的秒数 function timecha(objO,objT){ var str1=objO.substr(0,10); var str2=objT.substr(0,10); if(str1!=str2){ return 70; }else{ var str3=objO.substr(10,2); var str4=objT.substr(10,2); var str5=objO.substr(12,2); var str6=objT.substr(12,2); var str7=parseInt(str3)*60+parseInt(str5); var str8=parseInt(str4)*60+parseInt(str6); return str7-str8; } } //提供一个得到当前系统时间的字符串 Date.prototype.format = function (fmt) { //author: meizz var o = { "M+": this.getMonth() + 1, //月份 "d+": this.getDate(), //日 "h+": this.getHours(), //小时 "m+": this.getMinutes(), //分 "s+": this.getSeconds(), //秒 "q+": Math.floor((this.getMonth() + 3) / 3), //季度 "S": this.getMilliseconds() //毫秒 }; if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length)); for (var k in o) if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length))); return fmt; } </script> </head> <body> <span style="color: red;">上面是两个最主要的js,你在引用的js时需要根据你自己的js路径</span><br> <span style="color: red;">jquery.min.js</span><br> <span style="color: red;">jquery.cookie.js</span><br> <span style="color: red;">本页面解决了刷新页面就能重发的问题,如果你刷新页面之后,按钮时间被刷新,你需要看下你的ajax请求是否成功</span><br> <label>手机号码</label>:<input id="sjhm" name="sjhm"/><br> <button id="butt" onclick="buttclick()" type="button">免费获取验证码</button> </body> </html>
相关文章推荐
- 在html页面上使用ajax传递json数据到基于express框架(node.js)的服务器
- 基于Ajax无刷新实时loading页面
- 在C#.net中做页面上传的程序。用Dhtml的控件:(创建文件上载控件,该控件带有一个文本框和一个浏览按钮。)和类HtmlInputFile的两种方法
- 页面缓存, jsp 缓存, html 缓存, ajax缓存,解决方法
- Delphi基于HTML页面和XML实现表单填写
- js 按钮实现跳转页面 jsp html
- 基于AJAX的异步请求对多数据处理页面的优化
- 基于jquery的finkyUI插件与Ajax实现页面数据加载功能
- AJAX+Js实现html页面点击数自动更新
- 基于jQuery的AJAX和JSON实现纯html数据模板
- 基于jQuery的AJAX和JSON实现纯html数据模板
- 基于jQuery的AJAX和JSON实现纯html数据模板
- JAXER留言板-一个html页面的ajax留言版
- JAXER留言板-一个html页面的ajax留言版
- 纯JS的基于静态站点服务器时间 [无依赖] 的倒计时程序(Ajax应用)
- 基于Ajax无刷新实时loading页面
- 基于jQuery的AJAX和JSON实现纯html数据模板
- asp.net页面如何实现按钮倒计时
- 基于jQuery的AJAX和JSON实现纯html数据模板
- 基于jQuery的AJAX和JSON实现纯html数据模板