首页html 编写程序，实现电子时钟自动走动效果；（2）提供一个按钮控制电子时钟是否停止走动。加css样式使他更美观

html 编写程序，实现电子时钟自动走动效果；（2）提供一个按钮控制电子时钟是否停止走动。加css样式使他更美观

时间: 2024-03-21 18:38:05 浏览: 55

好的，我可以为您提供代码示例。首先是 HTML 代码： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>电子时钟</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="clock"> <span id="hour"></span> : <span id="minute"></span> : <span id="second"></span> </div> <button id="stop">停止</button> <script src="script.js"></script> </body> </html> ``` 然后是 CSS 代码： ```css .clock { font-size: 3em; font-weight: bold; color: #fff; background-color: #000; padding: 10px; border-radius: 10px; text-align: center; } button { font-size: 1.5em; padding: 10px; background-color: #fff; color: #000; border-radius: 10px; border: none; cursor: pointer; margin-top: 20px; } ``` 最后是 JavaScript 代码： ```js const hour = document.getElementById('hour'); const minute = document.getElementById('minute'); const second = document.getElementById('second'); function updateClock() { const date = new Date(); const h = date.getHours(); const m = date.getMinutes(); const s = date.getSeconds(); hour.textContent = h < 10 ? "0" + h : h; minute.textContent = m < 10 ? "0" + m : m; second.textContent = s < 10 ? "0" + s : s; } let timer = setInterval(updateClock, 1000); const stopButton = document.getElementById('stop'); stopButton.addEventListener('click', () => { if (timer) { clearInterval(timer); timer = null; stopButton.textContent = "继续"; } else { timer = setInterval(updateClock, 1000); stopButton.textContent = "停止"; } }); ``` 以上代码实现了一个简单的电子时钟，每秒钟更新一次时间。还提供了一个按钮，用于控制时钟的运行和停止。您可以将 CSS 样式更改为适合您的设计风格。

阅读全文