Javascript: 時鐘與innerHTML


阿瑟 發表



製作Javascript時鐘其實一點也不難, 只要將setTimeout() 再加上innerHTML去運用就可以完成!!

STEP1:【前言】
相信大家都有在網路上看過這樣的時鐘:



前一陣子網友大丙提供了一些資料, 在此先謝謝大丙

STEP2:【原始碼】
這次要講解的主角是innerHTML,會用這個功能以後Javascript就變成一種很強的工具。
我們先來看看範例:
<script language="JavaScript">
<!--
var now,hours,minutes,seconds,timeValue;
function showtime(){
now = new Date();
hours = now.getHours();
minutes = now.getMinutes();
seconds = now.getSeconds();
timeValue = (hours >= 12) ? "下午 " : "上午 ";
timeValue += ((hours > 12) ? hours - 12 : hours) + " 點";
timeValue += ((minutes < 10) ? " 0" : " ") + minutes + " 分";
timeValue += ((seconds < 10) ? " 0" : " ") + seconds + " 秒";
clock.innerHTML = timeValue;
setTimeout("showtime()",1000);
}
showtime();
//-->
</script>

<body onload="showtime();" >

<span id='clock'></span>


  • <span id='clock'></span>,這個其實就是一個實體的物件。
  • var now, hours, minutes, seconds, timeValue,像是C++一樣,您必須宣告變數
  • now=new Date()
    hours=now.getHours();
    ,取得現在的時間,依次類推
  • clock.innerHTML= timeValue;,clock就是之前的那個span標籤的id,innerHTML就是將clock這個span標籤之中的內容置換成timeValue這個變數的內容(這個變數的內容就是現在的時間)
  • setTimeout("showtime()",1000),setTimeout就是計時器,每隔1000毫秒(就是一秒)都會重新執行一次showtime()函式


  • 其實這個程式的原理很簡單,clock是一個實體的span標籤,而您用Javascript取得時間以後再排列之後用innerHTML把span標籤中的內容置換成現在的時間,然後每隔一秒就執行一次,那每隔一秒都會更新時間,也就成了一個時鐘了(時鐘應該都是一秒一秒跳的吧,不然咧?)。

    STEP3:【結語】
    終於找到時間又寫了一篇教學,最後再謝謝大丙幫忙整理這篇教學的所需資料。

    最後更新日期: 4/5/2002 3:40:27 PM