HTML實時顯示時間是一種非常實用的功能,可以讓網頁實現時間的實時更新。實現方法也非常簡單,只需要利用JavaScript的Date對象即可。
下面就是一個簡單的HTML實時顯示時間代碼:
<html> <head> <title>實時顯示時間</title> <script language="JavaScript"> function showTime(){ var now = new Date(); var hour = now.getHours(); var minute = now.getMinutes(); var second = now.getSeconds(); var timeValue = ""; timeValue += ((hour < 10) ? "0" : "") + hour + ":"; timeValue += ((minute < 10) ? "0" : "") + minute + ":"; timeValue += ((second < 10) ? "0" : "") + second; document.getElementById("showTime").innerHTML = timeValue; setTimeout("showTime()",1000); } </script> </head> <body onload="showTime()"> <p>當前時間為:</p> <pre id="showTime"></pre> </body> </html>這段代碼中,我們定義了showTime函數,利用Date對象獲取當前時間,再利用innerHTML方法將時間顯示在頁面上。setTimeout方法則是為了實現時間的自動更新,每隔一秒鐘調用一次showTime函數。 在HTML中,我們使用pre標簽包裹實時時間部分,將時間以純文本形式顯示,不進行任何格式化,方便我們自定義樣式。 總結一下,HTML實時顯示時間的實現非常簡單,利用JavaScript的Date對象及定時器就可以實現。這個功能在很多網站上應用非常廣泛,比如在線會議、直播等。如果您有需要實現類似功能的需求,可以直接使用上文提供的代碼,也可以根據自己的需求進行定制化開發。