如何用js顯示時鐘？

 這一段對js有點興趣，做了幾個js的小實驗，感覺挺有意思的，其中一個就是控制時鐘的顯示，有興趣的可以研究啊！下面先看下部分代碼:

<a href="http://blog.51cto.com/attachment/201108/081114289.png" target="_blank"></a>

<a href="http://blog.51cto.com/attachment/201108/081139696.png" target="_blank"></a>

首先在js代碼中聲明兩個變量：timerID和timerRunning，大家可以看到在showTimes方法中給timerId指派：timerID = setTimeout("showTimes()", 1000);表示浏覽器接收到setTimeout指令的1000毫秒之後就執行showTimes方法，如果想取消逾時設定,則調用stopClock()，在該方法中有個clearTimeout(timerID);可以取消逾時設定,若逾時設定還沒有發生,他就被取消了,則showTimes方法是不會被調用的，setTimeout()方法很有意思啊，有興趣的可以研究，可以對比下setInterval("showTime()",1000);看看兩個方法的執行效果；顧名思義，timerRunning就是表示時間是否在顯示，主要是為stopClock()和showTimes()做服務的。

另外就是如何讓得到的時間顯示，我們可以看到在js中的showTimes方法中有個document.clock.face.value = timerVal;document包含整個html文檔，在html中可以看到form表單的name屬性為clock，在表單的input元素中有type=”text”的文本，其name屬性為face，這樣就可以找到html頁面中的文本，把它的value值置為我們得到的時間，這樣就會在頁面上對應的文本框中顯示時間，時間的獲得可以先聲明一個時間對象var now = new Date();這樣再調用它的getYear()，getMonth()等來獲得時間。設定好後在html加載時調用這個方法即可，也就是&lt;body onLoad="startClock()"&gt;這樣在html頁面加載時就會自動調用startClock方法，進而讓時間顯示在頁面文本中。

Js很有意思啊，呵呵，有興趣的可以共同研究！

本文轉自HDDevTeam 51CTO部落格，原文連結：http://blog.51cto.com/hddev/652562，如需轉載請自行聯系原作者