前端页面写一个倒计时,初始数值为1000,每秒钟减少一,点击暂停按钮则数字不变,点击继续则继续减少
时间: 2023-10-25 19:06:33 浏览: 157
倒计时动画,数字变大再变小或变大退出
3星 · 编辑精心推荐
好的,这是一个比较简单的前端倒计时实现。我们可以通过一个计时器来实现每秒钟减少一的效果,然后再加上暂停和继续的功能。下面是一个示例代码:
HTML部分:
```
<div>
<p>倒计时:<span id="countdown">1000</span></p>
<button id="pause">暂停</button>
<button id="resume">继续</button>
</div>
```
JavaScript部分:
```
var timer;
var count = 1000;
function countdown() {
count--;
document.getElementById("countdown").innerHTML = count;
}
timer = setInterval(countdown, 1000);
document.getElementById("pause").addEventListener("click", function() {
clearInterval(timer);
});
document.getElementById("resume").addEventListener("click", function() {
timer = setInterval(countdown, 1000);
});
```
这段代码中,首先定义了一个计时器 `timer` 和一个初始数值 `count`,然后在 `countdown()` 函数中每次减少 `count` 的值并更新页面上的数字。接着使用 `setInterval()` 函数每隔一秒钟调用一次 `countdown()` 函数,实现倒计时的效果。
最后通过 `addEventListener()` 函数给暂停按钮和继续按钮分别添加了点击事件处理程序,当点击暂停按钮时清除计时器,当点击继续按钮时重新设置计时器,实现暂停和继续的功能。
阅读全文