给网页添加一个倒计时5秒动态
时间: 2023-07-04 14:15:59 浏览: 50
好的,以下是一个简单的实现方法:
1. 在 HTML 文件中添加一个空的 <div> 元素,用于显示倒计时数字:
```html
<div id="countdown"></div>
```
2. 在 JavaScript 文件中编写倒计时逻辑:
```javascript
// 获取倒计时显示元素
const countdownEl = document.getElementById('countdown');
// 定义倒计时初始值
let countdown = 5;
// 定义倒计时函数
function startCountdown() {
// 更新倒计时显示
countdownEl.innerText = countdown;
// 如果倒计时结束,停止计时并提示
if (countdown === 0) {
clearInterval(intervalId);
countdownEl.innerText = '倒计时结束!';
return;
}
// 每秒减少一秒倒计时
countdown--;
}
// 启动倒计时
const intervalId = setInterval(startCountdown, 1000);
```
3. 在页面加载完成后调用倒计时函数:
```javascript
document.addEventListener('DOMContentLoaded', () => {
startCountdown();
});
```
这样就可以实现一个简单的倒计时效果了。当页面加载完成后,倒计时会从 5 开始,每秒减少一秒,直到倒计时结束。