首页javascript 编写程序，实现电子时钟效果，要求每隔1秒获取一次当前时间，并提供一个按钮控制电子时钟是否停止，效果如图所示。

javascript 编写程序，实现电子时钟效果，要求每隔1秒获取一次当前时间，并提供一个按钮控制电子时钟是否停止，效果如图所示。

时间: 2024-12-15 12:15:55 浏览: 36

在JavaScript中，我们可以使用`setInterval`函数来每秒钟更新一次电子时钟，同时配合一个开关按钮来控制计时。下面是一个简单的示例，使用了HTML和CSS来构建界面： ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <style> #clock { font-size: 4rem; display: flex; align-items: center; justify-content: center; margin-top: 50px; color: white; } .stop-button { background-color: gray; color: white; border: none; padding: 10px 20px; cursor: pointer; } </style> </head> <body> <h2>电子时钟</h2> <div id="clock"></div> <button id="stopButton" class="stop-button" onclick="toggleClock()">停止</button> <script> let clockInterval; function showTime() { 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'); const timeElement = document.getElementById('clock'); timeElement.textContent = `${hours}:${minutes}:${seconds}`; } function toggleClock() { if (clockInterval) { clearInterval(clockInterval); document.getElementById('stopButton').textContent = "启动"; } else { clockInterval = setInterval(showTime, 1000); document.getElementById('stopButton').textContent = "停止"; } } // 初始显示时间 showTime(); </script> </body> </html> ``` 在这个示例中，我们创建了一个`showTime`函数，它获取当前时间并将其格式化成HH:mm:ss的形式。这个函数会在`toggleClock`函数被调用时定期运行。当用户点击"停止"按钮时，我们清除定时器`clearInterval`来停止更新；如果按钮上显示的是"启动"，则开始新的定时器。

阅读全文