<div class="alert"> <span class="closebtn" onclick="this.parentElement.style.display='none';">×</span> <strong>过时不侯!<br>QQ端若无法播放请使用浏览器打开!</strong> </div> 在此基础上 当网页加载完毕后 4秒内自动关闭这个元素且让倒计时显示出来
时间: 2023-08-14 11:09:04 浏览: 168
Layer.js实现表格溢出内容省略号显示,悬停显示全部的方法
可以通过JavaScript来实现该功能。可以先设置一个计时器,当网页加载完毕后,启动计时器,在4秒后自动关闭该元素并显示倒计时。以下是实现代码:
HTML代码:
```html
<div id="alert" class="alert">
<span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
<strong>过时不侯!<br>QQ端若无法播放请使用浏览器打开!</strong>
<span id="countdown"></span>
</div>
```
JavaScript代码:
```javascript
window.onload = function() {
var alertBox = document.getElementById("alert");
var countdown = document.getElementById("countdown");
var count = 4;
// 计时器函数
function timer() {
count--;
countdown.innerHTML = count;
if (count == 0) {
clearInterval(interval);
alertBox.style.display = "none";
}
}
// 设置计时器,每1000ms执行一次timer函数
var interval = setInterval(timer, 1000);
};
```
以上代码会在页面加载完毕后启动计时器,并在4秒后自动关闭该元素并隐藏倒计时。
阅读全文