最近再改一個項目，里面有個倒計時。類似於商品的秒殺，每個商品都會有一個倒計時，都要顯示在頁面上。當倒計時結束的時候，商品顯示已下架。這個功能是非常簡單的，但是不知道為什么項目會出現時間沒辦法獲取到，導致了，所有的倒計時都顯示underfind。下面是我自己仿照原來程序的代碼：（這段代碼是錯誤的）
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>循環套定時器——定時器套循環</title> 6 </head> 7 <body> 8 <ul id="list"> 9 <!--<li> 10 <p>到</p> 11 <span></span> 12 <p>還剩</p> 13 <b></b> 14 </li>--> 15 </ul> 16 </body> 17 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> 18 <script type="text/javascript"> 19 $.ajax({ 20 type: "get", 21 url: "./time.json", 22 async: true, 23 success: function(data) { 24 console.log(data); 25 $.each(data.time, function(k, item) { 26 console.log(item); 27 $("#list").append("<li>" + "<span>到</span>" + "<span>" + time1(item.endtime) + "</span>" + "<span> 還剩 </span>" + "<b>" + time2(item.endtime) + "</b>" + "</li>") 28 }); 29 } 30 }); 31 32 function time1(time) { 33 //console.log(time); 34 var timecenter = new Date(time); 35 var year = timecenter.getFullYear(); 36 var month = timecenter.getMonth() + 1; 37 var date1 = timecenter.getDate(); 38 var hour = timecenter.getHours(); 39 var min = timecenter.getMinutes(); 40 var sec = timecenter.getSeconds(); 41 return checkTime(year) + "-" + checkTime(month) + "-" + checkTime(date1) + " " + checkTime(hour) + ":" + checkTime(min) + ":" + checkTime(sec); 42 } 43 44 function time2(time) { 45 //console.log(time); 46 setInterval(function() { 47 var now_time = new Date().getTime(); 48 var bet_time = time - now_time; 49 if(bet_time <= 0) { 50 return "結束了！" 51 } else { 52 var dd = parseInt(bet_time / 60 / 60 / 24, 10); //計算剩余的天數 53 var hh = parseInt(bet_time / 60 / 60 % 24, 10); //計算剩余的小時數 54 var mm = parseInt(bet_time / 60 % 60, 10); //計算剩余的分鍾數 55 var ss = parseInt(bet_time % 60, 10); //計算剩余的秒數 56 hh = checkTime(hh); 57 mm = checkTime(mm); 58 ss = checkTime(ss); 59 msg = "距離結束" + dd + "天 " + hh + ":" + mm + ":" + ss; 60 //$(".psss").eq(index).html('<span class="spans1">' + supportNum + '</span><em class="ems1">' + targetAmount + '</em><i class="is">' + msg + '</i>'); 61 return msg; 62 } 63 }, 1000) 64 } 65 function checkTime(i) { 66 if(i < 10) { 67 i = "0" + i; 68 } 69 return i; 70 } 71 </script> 72 </html>
這里面的time.json是為了模仿ajax從后台加載數據！為了大家方便也把這個小json也寫在下面了。
1 { 2 "time": [ 3 { 4 "endtime": 1514995200000 5 }, { 6 "endtime": 1515045600000 7 }, { 8 "endtime": 1515045660000 9 } 10 ] 11 }
這里運行代碼就會發現出了下圖的情況：
為什么會出現這種原因呢。其實就是循環的進行是一瞬間完成的，但是計時器卻不是這樣的，他是一步步的執行的。
這樣就導致了，我們的定時器還沒有啟動，但是循環已經做完了，導致了咱們顯示的都是錯誤的。
然后就寫了一個定時器，在加載完成之后再進行倒計時循環，參加下面的代碼：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>循環套定時器——定時器套循環</title> </head> <body> <ul id="list"> <!--<li> <p>到</p> <span></span> <p>還剩</p> <b></b> </li>--> </ul> </body> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript"> $.ajax({ type: "get", url: "./time.json", async: true, success: function(data) { ////console.log(data); $.each(data.time, function(k, item) { //console.log(item); $("#list").append("<li>" + "<span>到</span>" + "<span>" + time1(item.endtime) + "</span>" + "<span> 還剩 </span>" + "<b>" + time2(item.endtime) + "</b>" + "</li>") }); set_Inter_val1(time_arr); } }); function time1(time) { ////console.log(time); var timecenter = new Date(time); var year = timecenter.getFullYear(); var month = timecenter.getMonth() + 1; var date1 = timecenter.getDate(); var hour = timecenter.getHours(); var min = timecenter.getMinutes(); var sec = timecenter.getSeconds(); return checkTime(year) + "-" + checkTime(month) + "-" + checkTime(date1) + " " + checkTime(hour) + ":" + checkTime(min) + ":" + checkTime(sec); } var time_arr = []; function time2(time) { //console.log(time); time_arr.push(time); //console.log(time_arr); //setInterval(function() { var now_time = new Date().getTime(); var bet_time = time - now_time; if(bet_time <= 0) { return "結束了！" } else { var dd = parseInt(bet_time/1000 / 60 / 60 / 24, 10); //計算剩余的天數 var hh = parseInt(bet_time/1000 / 60 / 60 % 24, 10); //計算剩余的小時數 var mm = parseInt(bet_time/1000 / 60 % 60, 10); //計算剩余的分鍾數 var ss = parseInt(bet_time/1000 % 60, 10); //計算剩余的秒數 hh = checkTime(hh); mm = checkTime(mm); ss = checkTime(ss); msg = "距離結束" + dd + "天 " + hh + ":" + mm + ":" + ss; //$(".psss").eq(index).html('<span class="spans1">' + supportNum + '</span><em class="ems1">' + targetAmount + '</em><i class="is">' + msg + '</i>'); return msg; } //}, 1000) //clearInterval(time); } var time = '' function set_Inter_val1(time_arr){ time = setInterval(function(){ for(var i=0;i<time_arr.length;i++){ var now_time = new Date().getTime(); var bet_time = time_arr[i] - now_time; if(bet_time <= 0) { $("li").eq(i).find('b').html('結束了'); } else { var dd = parseInt(bet_time/1000 / 60 / 60 / 24, 10); //計算剩余的天數 var hh = parseInt(bet_time/1000 / 60 / 60 % 24, 10); //計算剩余的小時數 var mm = parseInt(bet_time/1000 / 60 % 60, 10); //計算剩余的分鍾數 var ss = parseInt(bet_time/1000 % 60, 10); //計算剩余的秒數 hh = checkTime(hh); mm = checkTime(mm); ss = checkTime(ss); msg = "距離結束" + dd + "天 " + hh + ":" + mm + ":" + ss; $("li").eq(i).find('b').html(msg); console.log(msg); } } },1000) } function checkTime(i) { if(i < 10) { i = "0" + i; } return i; } </script> </html>
這樣，等待加載完成之后，然后啟動了定時器，定時器中有循環算時間，然后賦值。
最后給大家推薦一篇文章我覺得寫的不錯的文章：https://www.cnblogs.com/hyea/p/5596079.html