首页使用html、css、JavaScript实现以下功能：具体要求如下：（1）编写程序，实现电子数字显示时钟自动运行效果；（2）提供一个按钮控制电子时钟是否停止走动，两个参考图如下，您可以用CSS样式让它更美观，漂亮

使用html、css、JavaScript实现以下功能：具体要求如下：（1）编写程序，实现电子数字显示时钟自动运行效果；（2）提供一个按钮控制电子时钟是否停止走动，两个参考图如下，您可以用CSS样式让它更美观，漂亮

时间: 2023-10-10 07:10:12 浏览: 73

以下是一个简单的实现电子数字显示时钟自动运行效果的代码： ```html <!DOCTYPE html> <html> <head> <title>Digital Clock</title> <style> .clock { font-size: 5em; font-family: monospace; text-align: center; margin-top: 20%; } </style> </head> <body> <div class="clock"></div> <button id="stop">Stop Clock</button> <script> const clock = document.querySelector(".clock"); const stopButton = document.querySelector("#stop"); let timer; function displayTime() { 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}`; } function startClock() { displayTime(); timer = setInterval(displayTime, 1000); } function stopClock() { clearInterval(timer); } startClock(); stopButton.addEventListener("click", () => { if (stopButton.textContent === "Stop Clock") { stopClock(); stopButton.textContent = "Start Clock"; } else { startClock(); stopButton.textContent = "Stop Clock"; } }); </script> </body> </html> ``` 在这个代码中，我们使用了 `setInterval` 函数来每秒钟更新一次时钟。同时，我们也提供了一个按钮来控制时钟的开始和停止，点击按钮时会调用 `clearInterval` 函数来停止时钟的更新。

阅读全文