如何用js顯示時鐘

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

 

首先在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加載時調用這個方法即可,也就是<body onLoad="startClock()">這樣在html頁面加載時就會自動調用startClock方法,從而讓時間顯示在頁面文本中。
Js很有意思啊,呵呵,有興趣的可以共同研究!


本文出自 “HDDevTeam” 博客

You May Also Like