js实现电子时钟效果,要求每隔1秒获取一次当前时间,并提供一个按钮控制电子时钟让其停止。
时间: 2024-03-17 22:45:51 浏览: 23
好的,我可以为您提供一个简单的实现,代码如下:
HTML部分:
```html
<div id="clock"></div>
<button id="stop">停止</button>
```
JS部分:
```javascript
function displayTime() {
var now = new Date();
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds();
var timeString = hours.toString().padStart(2, '0') + ":" +
minutes.toString().padStart(2, '0') + ":" +
seconds.toString().padStart(2, '0');
document.getElementById("clock").innerHTML = timeString;
}
var timer = setInterval(displayTime, 1000);
document.getElementById("stop").addEventListener("click", function() {
clearInterval(timer);
});
```
解释一下代码:
- displayTime() 函数用于获取当前时间并在页面上显示;
- setInterval() 函数用于每隔1秒钟调用 displayTime() 函数更新时间;
- clearInterval() 函数用于停止 setInterval() 函数的执行;
- addEventListener() 函数用于监听按钮的点击事件,当按钮被点击时,停止 setInterval() 函数的执行。
希望这个实现对您有帮助!
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)