首页html实现时钟效果例子

html实现时钟效果例子

时间: 2023-02-09 07:25:29 浏览: 56

好的，下面是一个使用 HTML 实现时钟效果的简单例子： ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>时钟效果</title> </head> <body> <div id="clock"></div> <style> #clock { width: 200px; height: 200px; background-color: #ddd; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 40px; font-weight: bold; color: #333; } </style> <script> function updateClock() { var now = new Date(); var hours = now.getHours(); var minutes = now.getMinutes(); var seconds = now.getSeconds(); var clock = document.getElementById('clock'); clock.innerHTML = hours + ':' + minutes + ':' + seconds; } setInterval(updateClock, 1000); </script> </body> </html> ``` 这段代码实现了一个时钟，它会每秒更新一次，显示当前的时分秒。希望这对您有帮助！