首页【1】利用Javascript实现时钟效果

【1】利用Javascript实现时钟效果

时间: 2024-02-28 16:52:16 浏览: 19

可以使用JavaScript中的Date对象和定时器函数setInterval()来实现时钟效果。以下是一个简单的实现示例： ```html <!DOCTYPE html> <html> <head> <title>时钟</title> <style> .clock { font-size: 40px; font-weight: bold; text-align: center; margin-top: 50px; } </style> </head> <body> <div class="clock" id="clock"></div> <script> function displayTime() { let now = new Date(); let hour = now.getHours(); let minute = now.getMinutes(); let second = now.getSeconds(); let time = `${hour}:${minute}:${second}`; document.getElementById('clock').innerHTML = time; } setInterval(displayTime, 1000); </script> </body> </html> ``` 在上面的代码中，我们定义了一个名为displayTime()的函数，该函数获取当前的时间并将其显示在屏幕上。然后，我们使用setInterval()函数每秒钟调用一次displayTime()函数，以实现时钟效果。