首页用js写出一个电子时钟走动的效果，并提供一个按钮控制电子时钟是否停止走动

用js写出一个电子时钟走动的效果，并提供一个按钮控制电子时钟是否停止走动

时间: 2024-12-31 19:47:24 浏览: 5

在JavaScript中，我们可以利用`setInterval`函数创建一个模拟电子时钟不断更新时间的效果，并添加一个按钮来控制时钟的运行状态。下面是一个简单的示例： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>电子时钟</title> <style> #clock { font-size: 40px; display: inline-block; } #button-container { margin-top: 10px; } </style> </head> <body> <div id="clock"></div> <div id="button-container"> <button id="stopButton" onclick="toggleClock()">停止</button> </div> <script> let isRunning = true; function toggleClock() { if (isRunning) { clearInterval(timeUpdate); document.getElementById('stopButton').textContent = '开始'; isRunning = false; } else { const clock = document.getElementById('clock'); updateTime(); setInterval(updateTime, 1000); // 每秒更新一次 document.getElementById('stopButton').textContent = '停止'; isRunning = true; } } function updateTime() { const now = new Date(); const hours = now.getHours().toString().padStart(2, '0'); const minutes = now.getMinutes().toString().padStart(2, '0'); const seconds = now.getSeconds().toString().padStart(2, '0'); clock.textContent = `${hours}:${minutes}:${seconds}`; } // 初始加载时显示当前时间 updateTime(); </script> </body> </html> ``` 这个示例中，`updateTime`函数用于获取并设置当前的时间到页面上的`<div>`元素，而`toggleClock`函数则控制定时器的开关。当点击“停止”按钮时，会清除`setInterval`，时钟停止走动；再次点击，则重新启动定时器。

阅读全文