首页JS中使用BOM编写程序，实现电子时钟自动走动的效果，并提供一个按钮控制电子时钟是否停止走动

JS中使用BOM编写程序，实现电子时钟自动走动的效果，并提供一个按钮控制电子时钟是否停止走动

时间: 2024-10-20 10:09:52 浏览: 25

在JavaScript中，通过Browser Object Model (BOM) 即浏览器对象模型，我们可以创建一个简单的HTML页面结合JavaScript来实现一个动态的电子时钟。以下是一个基础示例： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>电子时钟</title> <style> #clock { font-size: 50px; } </style> </head> <body> <h1 id="clock">00:00:00</h1> <button onclick="toggleClock()">停止/开始计时</button> <script> let intervalId; function startClock() { intervalId = setInterval(() => { const now = new Date(); document.getElementById('clock').textContent = formatTime(now); }, 1000); // 每秒更新一次 } function stopClock() { clearInterval(intervalId); } function toggleClock() { if (intervalId) { stopClock(); document.querySelector("button").innerText = "开始计时"; } else { startClock(); document.querySelector("button").innerText = "停止计时"; } } // 时间格式化函数 function formatTime(date) { return `${date.getHours():02}:${date.getMinutes():02}:${date.getSeconds():02}`; } // 初始启动时钟 startClock(); </script> </body> </html> ``` 在这个例子中，我们创建了一个定时器（`setInterval`），每秒钟获取当前时间并更新显示在页面上的`<h1>`元素。点击按钮时，会切换计时器的状态，如果已经开启，则停止计时并将按钮文本改为"开始计时"；反之，开始新的计时并显示"停止计时"。

阅读全文