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

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

时间: 2024-05-15 09:12:06 浏览: 225

以下是一个简单的电子时钟效果的实现，包含一个“开始/停止”按钮，使用 JavaScript 编写： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>电子时钟</title> <style> body { background-color: #f5f5f5; font-family: Arial, sans-serif; font-size: 48px; text-align: center; padding-top: 100px; } button { font-size: 24px; padding: 10px 20px; margin-top: 40px; background-color: #4CAF50; color: #fff; border: none; border-radius: 5px; cursor: pointer; } button:hover { background-color: #3e8e41; } </style> </head> <body> <div id="time"></div> <button id="btn">开始</button> <script> var timeEl = document.getElementById('time'); var btnEl = document.getElementById('btn'); var timer; function updateTime() { var now = new Date(); var hours = now.getHours(); var minutes = now.getMinutes(); var seconds = now.getSeconds(); hours = hours < 10 ? '0' + hours : hours; minutes = minutes < 10 ? '0' + minutes : minutes; seconds = seconds < 10 ? '0' + seconds : seconds; timeEl.innerHTML = hours + ':' + minutes + ':' + seconds; } function startTimer() { timer = setInterval(updateTime, 1000); btnEl.innerHTML = '停止'; } function stopTimer() { clearInterval(timer); btnEl.innerHTML = '开始'; } btnEl.addEventListener('click', function() { if (timer) { stopTimer(); } else { startTimer(); } }); updateTime(); </script> </body> </html> ``` 在这个例子中，我们使用了 `setInterval` 函数来每隔一秒更新一次时间，并且维护了一个名为 `timer` 的变量，以便我们可以在需要时清除定时器。我们还使用了一个按钮，通过点击按钮来控制电子时钟的开始和停止。

阅读全文