article_main_img

文、意如老師

 

 

 

續上一篇 — 聯成電腦分享: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);

}

 

 

 

完整程式碼:

 

 

 

    聯成電腦 發表在 痞客邦 留言(0) 人氣()