用js编写程序实现电子时钟自动走动效果,提供一个按钮控制电子时钟是否停止走动
时间: 2024-01-21 16:18:34 浏览: 186
可以使用`setInterval`函数来实现电子时钟自动走动效果,并且通过按钮来控制是否停止走动。
HTML代码:
```html
<div id="clock">00:00:00</div>
<button id="stopBtn">停止</button>
```
JS代码:
```javascript
// 获取时钟元素和按钮元素
var clock = document.getElementById("clock");
var stopBtn = document.getElementById("stopBtn");
// 定义变量,用于存储定时器ID和是否停止的标志
var intervalId;
var isStop = false;
// 定义函数,用于更新时钟显示
function updateClock() {
var now = new Date();
var hours = now.getHours().toString().padStart(2, "0");
var minutes = now.getMinutes().toString().padStart(2, "0");
var seconds = now.getSeconds().toString().padStart(2, "0");
clock.textContent = hours + ":" + minutes + ":" + seconds;
}
// 启动定时器,每秒钟更新时钟显示
intervalId = setInterval(function() {
updateClock();
}, 1000);
// 绑定按钮点击事件,用于控制是否停止定时器
stopBtn.addEventListener("click", function() {
if (isStop) {
// 如果已经停止,则重新启动定时器
intervalId = setInterval(function() {
updateClock();
}, 1000);
stopBtn.textContent = "停止";
isStop = false;
} else {
// 如果没有停止,则停止定时器
clearInterval(intervalId);
stopBtn.textContent = "启动";
isStop = true;
}
});
```
这样就可以实现一个简单的电子时钟,并且通过一个按钮来控制是否停止走动。
阅读全文