HTML電子動態時鐘是一種實用而重要的網頁元素,它能夠向用戶展示當前的時間。在網站的頭部、頁面底部等位置都可以設置一個動態時鐘,為用戶提供便利。
<html> <head> <title>動態時鐘</title> <style> body { background-color: #444; font-family: monospace; } .clock { color: white; font-size: 100px; text-align: center; margin-top: 20%; } </style> </head> <body> <div class="clock"></div> <script> function getTime() { let date = new Date(); let hour = date.getHours(); let minute = date.getMinutes(); let second = date.getSeconds(); hour = checkTime(hour); minute = checkTime(minute); second = checkTime(second); let timeString = hour + ":" + minute + ":" + second; document.querySelector(".clock").innerHTML = timeString; setTimeout(getTime, 1000); } function checkTime(i) { if (i< 10) { i = "0" + i; } return i; } getTime(); </script> </body> </html>
以上代碼中,使用了JavaScript的Date對象獲取當前時間,并引入了定時器函數setTimeout來更新時鐘的時間。同時,為了美化時鐘的外觀,還通過CSS樣式對時鐘元素進行了設置。
該動態時鐘代碼可以在所有的現代瀏覽器中運行,并且非常簡單易懂,可以方便地進行二次開發,滿足不同網站對動態時鐘的需求。
上一篇html電子公章代碼
下一篇html電商首頁代碼