[轉貼] JavaScript 在網頁上顯示時間
發表於 : 2014-09-18, 10:46
JavaScript 可以輕鬆的顯示現在時間於網頁上，僅需要透過 new Date() 與 setTimeout 搭配寫一個 function 就可以做到，此篇介紹兩種表示的方式，一種是比較原汁原味，也比較簡單，但是一般人比較看不懂，第二種是稍微整理過的表示方法。
範例一、JavaScript 在網頁上顯示時間基本語法
這樣的寫法算是比較簡單的寫法，首先我們寫了一個 function 叫做 ShowTime()，裡面第一行的意思是找到 showbox 這個區域元素，然後寫入現在的時間，而時間則是直接用 new Date() 來表示，接著下面那一行 setTimeout('ShowTime()',1000); 的意思每一秒鐘重新執行一次這個 function。<body onload="ShowTime()"> 的意思是當網頁載入的時候，直接執行 ShowTime 這個 function，如此一來，網頁上就會出現時間，且每一秒都更新一次。
範例二、JavaScript 在網頁上顯示時間的進階語法
進階語法可以顯示出來的結果比較適合人類閱讀，我們用 NowDate 來表示 now Date() 的物件，並分配為 h（時）、m（分）、s（秒）再顯示於網頁上，這裡我們用到了呼叫時間的技巧 getHours()、getMinutes() 與 getSeconds()，我們在JavaScript 取得今天日期篇介紹。
延伸閱讀 --
資料來源：
http://www.wibibi.com/info.php?tid=176
範例一、JavaScript 在網頁上顯示時間基本語法
代碼: 選擇全部
<script language="JavaScript">
function ShowTime(){
document.getElementById('showbox').innerHTML = new Date();
setTimeout('ShowTime()',1000);
}
</script>
<body onload="ShowTime()">
<div id="showbox"></div>
</body>範例二、JavaScript 在網頁上顯示時間的進階語法
代碼: 選擇全部
<script language="JavaScript">
function ShowTime(){
var NowDate=new Date();
var h=NowDate.getHours();
var m=NowDate.getMinutes();
var s=NowDate.getSeconds();
document.getElementById('showbox').innerHTML = h+'時'+m+'分'+s+'秒';
setTimeout('ShowTime()',1000);
}
</script>
<body onload="ShowTime()">
<div id="showbox"></div>
</body>延伸閱讀 --
資料來源：
http://www.wibibi.com/info.php?tid=176