首页html写一个动态时钟

html写一个动态时钟

时间: 2023-07-01 09:06:15 浏览: 87

以下是一个简单的HTML动态时钟示例： ```html <!DOCTYPE html> <html> <head> <title>动态时钟</title> <style type="text/css"> body { margin: 0; padding: 0; background-color: #222; color: #fff; text-align: center; font-size: 48px; font-family: Arial, sans-serif; } </style> </head> <body> <script> function updateTime() { var date = new Date(); var hours = date.getHours(); var minutes = date.getMinutes(); var seconds = date.getSeconds(); hours = (hours < 10 ? "0" : "") + hours; minutes = (minutes < 10 ? "0" : "") + minutes; seconds = (seconds < 10 ? "0" : "") + seconds; var timeString = hours + ":" + minutes + ":" + seconds; document.getElementById("clock").innerHTML = timeString; } setInterval(updateTime, 1000); </script> <div id="clock"></div> </body> </html> ``` 在这个示例中，我们使用JavaScript的Date对象来获取当前的时间。然后将小时，分钟和秒转换为两位数，并将它们组合成一个字符串。最后，我们将这个字符串设置为一个具有ID“clock”的div元素的innerHTML。使用setInterval函数每秒钟更新一次时钟。样式将时钟居中并设置背景颜色，字体大小和字体家族。

阅读全文