首页用JavaScript在网页中显示一个工作中的时钟

用JavaScript在网页中显示一个工作中的时钟

时间: 2024-12-26 09:30:02 浏览: 4

在JavaScript中创建一个动态显示时间的工作时钟，你可以使用`setInterval`函数配合`Date`对象来实现。下面是一个简单的例子： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>工作时钟</title> <style> #clock { font-size: 40px; margin: 50px auto; text-align: center; } </style> </head> <body> <div id="clock"></div> <script> function displayTime() { var now = new Date(); var hours = now.getHours(); // 24小时制，如果需要12小时制可以使用getHours()%12 + 1 var minutes = now.getMinutes(); var seconds = now.getSeconds(); if (minutes < 10) { minutes = "0" + minutes; } if (seconds < 10) { seconds = "0" + seconds; } var timeStr = hours + ":" + minutes + ":" + seconds; document.getElementById("clock").innerText = timeStr; } // 每秒更新一次时间 setInterval(displayTime, 1000); </script> </body> </html> ``` 这个示例会在页面上创建一个id为`clock`的元素，并实时显示当前的时间。当分钟或秒钟小于10时，会自动添加前导零。

阅读全文