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”。

<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);
}

完整程式碼:

加入菜鳥救星官方Line並回覆「我想看文章」,不定期獲得更多知識吧!

不同頻道,不同知識!

發表迴響

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料