Javascript網頁程式_即時更新日期時間（下）｜菜鳥救星RookieSavior

文、意如老師

續上一篇 — Javascript網頁程式_處理日期、時間篇（上）｜菜鳥救星RookieSavior 熟練以上基礎工後，接下來要讓日期/時間隨時即時更新。

任務一：認識setInterval() 函數，設定事件間隔時間（重複執行）
任務二：認識setTimeout() 函數，設定事件間隔時間（只執行一次）
任務三：認識onload 事件，網頁載入事件
任務四：實作即時更新日期/時間
任務五：客製化自己的日期/時間
任務六：認識 clearInterval() 函數，清除設定的間隔時間

任務一：認識setInterval() 函數

說明：事件在固定的間隔時間重複執行。
公式：setInterval(event,time)
此函數需要代入兩個參數
參數1：event 代入功能事件
參數2：time 代入間隔時間(以毫秒為單位)，1000毫秒 = 1秒

範例：點選按鈕後間隔5秒跳出 ”您好”。

<!–建置按鈕–>
<button onclick=”mytouch()”>觸發</button>
<!–建立變數儲存發生事件–>
var myparam;
<!–點選按鈕時執行–>
function mytouch() {
<!–呼叫事件執行間隔–>
myparam = setInterval(myevent, 5000);
}
<!–執行事件–>
function myevent() {
alert(“您好”);
}

完整程式碼：

任務二：認識setTimeout() 函數

說明：事件在固定的時間只會執行一次。
公式：setTimeout (event,time)
此函數需要代入兩個參數
參數1：event 代入功能事件
參數2：time 代入間隔時間(以毫秒為單位)，1000毫秒 = 1秒

範例：點選按鈕後5秒跳出 ”您好”。
把剛剛的範例函數改成setTimeout()

<!–點選按鈕時執行–>
function mytouch() {
<!–呼叫事件執行–>
myparam = setTimeout(myevent, 5000);

完整程式碼：

任務三：認識onload 事件

說明：在頁面跑完後，馬上執行的事件，通常會寫在html 標籤中的<body></body>
公式：<body onload=”event()”>
範例：
<!–頁面載完時執行mytouch()事件–>
<body onload=mytouch()>

完整程式碼：

任務四：實作即時更新日期/時間

Step1：先建立等等要放日期時間的空盒子<span></span>，並給空盒子一個名字，這邊取名id=”current”。

Step2：建立一個功能function事件:先在空盒子上填上目前的日期時間

function current_time(){
　document.getElementById(‘current’).innerHTML = new Date();
}

Step3：每秒執行一次
function current_time(){
　document.getElementById(‘current’).innerHTML = new Date();
　 setTimeout(‘current_time()’,1000); //每秒呼叫一次功能:
}

Step4：重複自己呼叫自己

function current_time(){
　document.getElementById(‘current’).innerHTML = new Date();
　 setTimeout(‘current_time()’,1000); //每秒呼叫一次功能:
current_time() //再次呼叫自己
}

Step5：最後在網頁一載入時馬上呼叫功能: current_time()
<body onload=”current_time()”>

完整程式碼：

任務五：客製化自己的日期時間

參考以下的表：抓出年、月、日、時、分、秒

標準日期時間	Today = new Date()
年	Today.getFullYear()
月份（月份固定+1）	(Today.getMonth()+1)
日	Today.getDate()
時	Today.getHours()
分	Today.getMinutes()
秒	Today.getSeconds()