(3)实现电子时钟效果,要求每隔1秒获取一次当前时间,并提供一个按钮控制电子时钟是否停止。.
时间: 2024-03-12 15:44:52 浏览: 72
C# 石英时钟 (图像操作)
好的,这是一个比较简单的电子时钟的实现,你可以参考下面的示例代码来实现:
```html
<!-- HTML 结构 -->
<div id="clock"></div>
<button id="stop">停止</button>
```
```javascript
// JavaScript 代码
function updateTime() {
var now = new Date();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
hour = hour < 10 ? '0' + hour : hour;
minute = minute < 10 ? '0' + minute : minute;
second = second < 10 ? '0' + second : second;
var timeStr = hour + ':' + minute + ':' + second;
document.getElementById('clock').innerText = timeStr;
}
var intervalId = setInterval(updateTime, 1000);
document.getElementById('stop').addEventListener('click', function() {
if (intervalId) {
clearInterval(intervalId);
intervalId = null;
this.innerText = '继续';
} else {
intervalId = setInterval(updateTime, 1000);
this.innerText = '停止';
}
});
```
在这段代码中,我们首先声明了一个 `updateTime` 函数,用于更新当前时间,然后使用 `setInterval` 方法来每隔1秒钟调用一次 `updateTime` 函数,实现电子时钟的效果。接着,我们添加了一个按钮元素,用于控制电子时钟是否停止,当用户点击该按钮时,我们通过判断 `intervalId` 是否存在来决定是停止还是继续执行 `setInterval` 方法。
阅读全文