方法:1、利用Date方法來配合getHours、getMinutes和getSeconds方法取得目前時間的時、分和秒數;2、利用「setInterval(取得時間的函數名稱,1000)」語句設定每一秒刷新一次取得到的時間即可。
本教學操作環境:windows10系統、javascript1.8.5版、Dell G3電腦。
javascript怎麼實作網頁線上時鐘功能
#javascript是一種基於物件(Object)和事件驅動(Event Driven)的腳本語言,它運行在客戶端,從而減輕了伺服器端的負擔。一個完整的javascript是由核心語法、瀏覽器物件模型和文檔物件模型所組成。現在,與大家分享如何實現頁面上的一個小功能,時鐘即時顯示。
建立日期物件:Date物件包含日期和時間兩個訊息,建立日期物件的基本語法有兩種:
方法一:var 日期實例=new Date(參數);
方法二:var 日期實例=new Date( );
透過Date物件的get方法取得日期、時間等。為了在頁面上顯示,可以使用DOM中的innerHTML屬性進行設定。
使用if語句判斷當前小時是否大於12,從而判斷上、下午。
如何進行即時顯示呢? javascript中提供了兩種定時函數:setTimeout( )和setInterval( )。
setTimeout():用於在指定的毫秒數後呼叫函數或計算表達式。
setInterval(): 可依照指定的週期(以毫秒計)來呼叫函數或計算表達式。
這裡顯然選擇使用setInterval( )方法來實現,頁面即時顯示時間。
透過上面的步驟就完成了時間即時顯示的程式碼設計,完整程式碼如下:
最後,運行就OK啦,運行效果如圖所示。注意,這個時候時間是即時變化的,即一秒變一次。
【相關推薦:javascript學習教學#】
以上是javascript怎麼實現網頁線上時鐘功能的詳細內容。更多資訊請關注PHP中文網其他相關文章!