<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按鈕60秒倒計時
免責聲明！
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。