<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>
