當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JS定时器：倒计时
1.思路及步驟：
2.代碼實現
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>倒計時 - 開課吧</title> <link href="style.css" rel="stylesheet" type="text/css" /></head> <body><div id="miaov"><div id="fill_in"><span class="title">請輸入：</span><input type="text" class="long_text" /><span class="space1">年</span><input type="text" class="text" /><span class="space2">月</span><input type="text" class="text" /><span class="space3">日</span></div><a href="javascript:;" id="go" class="go"></a><p id="target">現在距離 -<strong>0000年00月00日</strong>- 還剩：</p><div id="date"><p id="day">00</p><p id="hour">00</p><p id="min">00</p><p id="sec">00</p></div><h1 title="妙味課堂-www.miaov.com"><a href="http://www.miaov.com"></a></h1> </div> <script> (function(){/*思路及步驟：1.獲取到當前系統時間并填入輸入框中2.可更改輸入框中的時間，當點擊倒計時時，獲取輸入框中更改后的時間，并將現在距離處的當前時間進行賦值3.將輸入的時間與當前時間相減得到兩個時間的毫秒值4.將獲取到的毫秒值進行判斷，如果小于或等于當前時間，需要提示不能開始倒計時5.將毫秒值除以天得到的整數就是倒計時的天數，通過總時長取模天數剩余的時間即剩余的小時數，再除以分即為倒計時分鐘數，以此類推6.得到正確的倒計時天，小時，分，秒后需要將不足兩位的進行補零操作7.設置間隔定時器，設置倒計時開始計時。并進行定時器管理（點擊多次定時器，計時會加快）8.可能會出現多次提示時間輸入不正確。將初始化倒計時時間放在倒計時定時器后面執行即可。如果setCountDown放在定時器前面，清空定時器時定時器時null。如果放在后面定時器就已經存在了就不會再alert*/// 1.獲取到當前系統時間并填入輸入框中(初始化頁面)var date = new Date();var year = date.getFullYear();var month = date.getMonth()+1;var day = date.getDate();var miaov = document.querySelector("#miaov");var inputs = miaov.querySelectorAll("input");var go = miaov.querySelector("#go");var target = miaov.querySelector("#target strong");var dayTxt = miaov.querySelector("#date #day");var hourTxt = miaov.querySelector("#date #hour");var minTxt = miaov.querySelector("#date #min");var secTxt = miaov.querySelector("#date #sec");var timer = null;var onOff = false;//初始化定時器為falseinit();function init(){inputs[0].value = year;inputs[1].value = month;inputs[2].value = day;}//2.可更改輸入框中的時間，當點擊倒計時時，獲取輸入框中更改后的時間，并將現在距離處的當前時間進行賦值go.onclick = function(){//7.設置間隔定時器，設置倒計時開始計時。并進行定時器管理（點擊多次定時器，計時會加快）if(onOff){//一點定時器開啟了就不再開啟定時器直接returnreturn;}onOff = true;//一旦開啟定時器后就將開關設置為falsetimer = setInterval(function(){setCountDown();},1000);//清空定時器：如果只在setCountDown中清空定時器，那么在調用setCountDown和定時器中調用setCountDown時會分別執行一次alert//但是如果setCountDown放在定時器前面，清空定時器時定時器時null。如果放在后面定時器就已經存在了就不會再alertsetCountDown();};function setCountDown(){//每次點擊倒計時時需要重新獲取當前系統時間，防止用戶頁面開啟后，很久才點擊倒計時按鈕var curDate = new Date();//獲取更改后輸入框的值var newYear = inputs[0].value;var newMonth = inputs[1].value;var newDay = inputs[2].value;//將點擊后的時間設置到現在距離時間處target.innerHTML = newYear + "年" + fillZero(newMonth) + "月" + fillZero(newDay) + "日";//將輸入的時設置到日期對象中var washDate = new Date(newYear,newMonth-1,newDay);//3.將輸入的時間與當前時間相減得到兩個時間的毫秒值var interval = washDate-curDate;//獲取到的是毫秒數//4.將獲取到的毫秒值進行判斷，如果小于或等于當前時間，需要提示不能開始倒計時if(interval<=0){//如果時間在當前時間或者之前，會不斷調用此處，所以應該設置定時器為true，讓其只調用一次clearInterval(timer);onOff = false;//倒計時結束時關閉定時器alert("輸入時間不能在當前時間或之前");return;}//5.將毫秒值除以天得到的整數就是倒計時的天數，剩余的值%小時即剩余的小時數，再除以分即為倒計時分鐘數，以此類推var oneDay = 24 * 60 * 60 * 1000;var oneHour = 60 * 60 * 1000; var oneMin = 60 * 1000; var oneSecond = 1000; //6.得到正確的倒計時天，小時，分，秒后需要將不足兩位的進行補零操作// 取模是剩余的毫秒數取模每天，每小時，分鐘的模。如獲取小時數之前，使用毫秒數取模每天的毫秒數var days = fillZero(parseInt(interval / oneDay));//得到相隔的天數//通過總時長取模天數，剩余的時間即小時的毫秒數interval = interval % oneDay;var hours = fillZero(parseInt(interval / oneHour));//相隔天數之外的時間即小時//通過剩余總時長取模小時，剩余的時間即分鐘的毫秒數interval = interval % oneHour;var mins = fillZero(parseInt(interval / oneMin));//相隔天數之外的時間即分鐘//通過剩余總時長取模分鐘，剩余的時間即分鐘的毫秒數interval = interval % oneMin;var senconds = fillZero(parseInt(interval / oneSecond));//相隔天數之外的時間即分鐘dayTxt.innerHTML = days;hourTxt.innerHTML = hours;minTxt.innerHTML = mins;secTxt.innerHTML = senconds;}function fillZero(time){//傳進來的時間都是數字類型，需要將其轉為字符串類型，才能使用length，進行補零（或者可以判斷time<10時即可補零）// time = '' + time;time = time<10 ? '0' + time: '' + time;return time;}})(); </script> </body> </html>結果：
3.注意事項?
計算時間差：使用目標時間和當前時間相減得到的毫秒數，對應和日，時，分，秒的毫秒值進行取值即可
var oneDay = 24 * 60 * 60 * 1000;var oneHour = 60 * 60 * 1000; var oneMin = 60 * 1000; var oneSecond = 1000; //6.得到正確的倒計時天，小時，分，秒后需要將不足兩位的進行補零操作// 取模是剩余的毫秒數取模每天，每小時，分鐘的模。如獲取小時數之前，使用毫秒數取模每天的毫秒數var days = fillZero(parseInt(interval / oneDay));//得到相隔的天數//通過總時長取模天數，剩余的時間即小時的毫秒數interval = interval % oneDay;var hours = fillZero(parseInt(interval / oneHour));//相隔天數之外的時間即小時//通過剩余總時長取模小時，剩余的時間即分鐘的毫秒數interval = interval % oneHour;var mins = fillZero(parseInt(interval / oneMin));//相隔天數之外的時間即分鐘//通過剩余總時長取模分鐘，剩余的時間即分鐘的毫秒數interval = interval % oneMin;var senconds = fillZero(parseInt(interval / oneSecond));//相隔天數之外的時間即分鐘定時器問題：
問題1：如果輸入時間為當前日期或者小于當前日期時，會alert 輸入時間有誤，但是在初始化和定時器中都有進行判斷。所以會無限次彈出？解決：在判斷時清空定時器。?clearInterval(timer);
//4.將獲取到的毫秒值進行判斷，如果小于或等于當前時間，需要提示不能開始倒計時if(interval<=0){//如果時間在當前時間或者之前，會不斷調用此處，所以此時清空定時器clearInterval(timer);onOff = false;//倒計時結束時關閉定時器alert("輸入時間不能在當前時間或之前");return;}問題2：當清空定時器后，發現仍然會在兩次調用時，alert兩次輸入有誤。
解決：將初始化倒計時時間放在倒計時定時器后面執行即可。
清空定時器時，如果只在setCountDown中清空定時器，那么在調用setCountDown和定時器中調用setCountDown時會分別執行一次alert。但是如果setCountDown放在定時器前面，清空定時器時定時器時null。如果放在后面定時器就已經存在了就不會再alert。
timer = setInterval(function(){setCountDown();},1000);//清空定時器：如果只在setCountDown中清空定時器，那么在調用setCountDown和定時器中調用setCountDown時會分別執行一次alert//但是如果setCountDown放在定時器前面，清空定時器時定時器時null。如果放在后面定時器就已經存在了就不會再alertsetCountDown();問題3：當輸入時間正確進行倒計時時，多次點擊倒計時按鈕，定時器會開啟無限個。
解決：使用開關控制定時器，如果開啟了就不再開啟新的定時器，關閉就開啟新的定時器。注意需要將判斷相差時間<=0時，也設置關閉。否則倒計時結束，定時器也不會關閉。
var onOff = false;//初始化定時器為false if(onOff){//一點定時器開啟了就不再開啟定時器直接returnreturn;}onOff = true;//一旦開啟定時器后就將開關設置為falsetimer = setInterval(function(){setCountDown();},1000); if(interval<=0){//如果時間在當前時間或者之前，會不斷調用此處，所以此時清空定時器clearInterval(timer);onOff = false;//倒計時結束時關閉定時器alert("輸入時間不能在當前時間或之前");return;}?
總結
- 上一篇： :nth-child选择器
- 下一篇： JS 倒计时定时器