文、意如老師
續上一篇 — 聯成電腦分享：Javascript網頁程式_處理日期、時間篇（上）
熟練以上基礎工後，接下來要讓日期/時間隨時即時更新。
任務一：認識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"。
<span id="current"> </span>
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()
完整程式碼：
任務六：認識 clearInterval()函數
說明：最後如果要暫停，或不想繼續了，這時候就可以使用clearInterval()函數
公式：clearInterval(myVar);
範例：
一開始先設定一個變數myparam使用setInterval() 先設定事件發生間隔時間。
myparam = setInterval( 事件 , 間隔毫秒 );
這時候要取消時就可以使用clearInterval(myparam);
實作：
網頁一開始先跑標準隨時更新的日期時間，設定一個按鈕為暫停，點選按鈕時，時間停止更新。
Step1：建立一個空盒子、一個按鈕
<p id="box"></p>
<button onclick="myStop()">時間暫停</button>
Step2：把時間塞入空盒子內
myparam = setInterval(myDate, 1000);
function myDate() {
document.getElementById("box").innerHTML = new Date();
}
Step3：按下按鈕後時間暫停
function myStop() {
clearInterval(myparam);
}
完整程式碼：
