js编写程序,实现电子时钟效果,要求每隔1秒获取一次当前时间,并提供一个按钮控制电子时钟是否停止。
时间: 2024-12-20 22:30:20 浏览: 38
在JavaScript中实现电子时钟效果,你可以通过定时器`setInterval`函数每隔1秒获取一次当前的时间,并更新显示。这里是一个简单的示例:
```javascript
// 获取DOM元素
const timeDisplay = document.getElementById('time-display');
const stopButton = document.getElementById('stop-button');
let isRunning = true; // 标记时钟是否运行
function updateTime() {
const now = new Date();
const formattedTime = `${now.getHours()}:${now.getMinutes()}:${now.getSeconds()}`;
timeDisplay.textContent = formattedTime;
}
// 每隔1秒更新时间
if (isRunning) {
setInterval(updateTime, 1000);
}
// 停止按钮点击事件
stopButton.addEventListener('click', function() {
isRunning = !isRunning; // 切换运行状态
if (!isRunning) {
clearInterval(updateTime); // 清除定时器,停止计时
} else {
updateTime(); // 如果开始,则立即更新一次时间
}
});
```
在这个例子中,你需要在HTML中添加对应的id用于绑定DOM元素,如:
```html
<div id="time-display"></div>
<button id="stop-button">停止时钟</button>
```
阅读全文