首頁 > 開發者 > JavaScript
標籤：
倒計時很常見，例如離XX活動還有XX天XX小時XX分XX秒，然後逐秒減少，實現很簡單，我只是想記錄這過程中的一點小坑。
先上代碼：
<html> <head> <meta charset="UTF-8" > <title>task0002_2</title> </head> <body> <input id="input-date" type="text" /> <button id="btn">點擊</button> <p> 距離<span id="show-date">YYYY年MM月DD日</span>還有<span id="time-different">XX天XX小時XX分XX秒</span> </p> <script src="./js/util.js"></script> <script src="./js/task0002_2.js"></script> </body></html>
在按照xxxx-xx-xx這樣的格式輸入之後，點擊按鈕，下面就開始倒計時。
實現思路很簡單：按照輸入的時間轉換成Date，然後擷取現在的時間，兩個時間相減，再轉換成以天/時/分/秒為單位的就好了。
現在看看我的JS代碼，我沒有做格式錯誤的判斷，預設輸入的時間格式是正確的。
addEvent($("#btn"), "click", displayTime); // addEvent是我自己封裝的函數，其實就是元素的事件綁定function displayTime() { var $inputDate = $("#input-date").value; // 擷取日期文字
var date = new Date(Date.parse($inputDate)); // 用日期文字構造Date date.setHours(0); date.setMinutes(0); date.setSeconds(0); console.log(date.toString()); var str = date.getFullYear().toString() + "年" + (date.getMonth()+1).toString() + "月" + date.getDate().toString() + "日"; $("#show-date").innerHTML = str; display(date);}// 倒計時function display(date) { var nowDate = new Date(); console.log(nowDate.toString()); var diffTime = date.getTime() - nowDate.getTime(); // 相減後單位是毫秒 var remain = diffTime % parseInt(1000 * 3600 * 24); // 1000 * 3600 * 24， 因為單位是毫秒，這就是1天的毫秒數了，不需要自己算，列個公式出來就好，取餘的意思就是剩下的毫秒數不夠一天，繼續算還剩多少小時，下面以此類推 var diffDate = Math.floor(diffTime / (1000 * 3600 * 24)); // 還剩多少天 var diffHour = Math.floor(remain / (1000 * 3600)); remain = remain % (1000 * 3600); var diffMinute = Math.floor(remain / (1000 * 60)); remain = remain % (1000 * 60); var diffSecond = Math.floor(remain / (1000)); var str = diffDate + "天" + diffHour + "時" + diffMinute + "分" + diffSecond + "秒"; $("#time-different").innerHTML = str; // 如果不夠1秒就繼續倒數，否則停止 if (remain > 1000) { setTimeout(display, 1000, date); }}
上面代碼基本上很好懂的，下面說一下要注意的地方：
1.parse() 返回的是1970年1月1日午夜到指定日期（字串）的毫秒數。我上面的預設是到指定日期的00:00的倒計時，所以構造了Data要setHours()，否則預設是的8點
2.JavaScript中除法的結果預設是浮點數，就是我console.log(2/3);出來的結果是0.66666666，需要使用Math.floor向下取整
3.setTimeout要帶參數，注意不要直接setTimeout(display(date), 1000);這樣寫，setTimeout詳見JavaScript學習之setTimeout
4.getFullYear() 從 Date 對象以四位元字返回年份，所以最好就不要用getYear()。getMonth() 從 Date 對象返回月份是(0 ~ 11)，所以記得加一。
JavaScript學習之 倒計時
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
