本文介绍如何使用JavaScript实现网页中常见的倒计时关闭广告功能。通过创建定时器函数，实时更新DOM元素显示的剩余秒数，当时间归零时隐藏广告容器并显示结束提示。代码包含HTML结构、CSS样式及JS逻辑，适合前端初学者参考学习。
JavaScript实现倒计时自动关闭广告
JavaScript实现倒计时自动关闭广告
当前正在学习大前端开发，若代码或思路存在不规范之处，敬请谅解并欢迎指正。
在许多App和网页应用中，常可见到此类广告形式：用户访问网站时弹出广告窗口，窗口内显示倒计时，待倒计时结束后广告自动消失。下文将通过具体代码演示该功能的实现过程。
代码实现
具体实现代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.djs{
width: 30px;
height: 30px;
position: absolute;
left: 700px;
color: white;
background-color: darkred;
}
.end{
display: none;
}
</style>
</head>
<body>
<div class="djs"></div>
<img class="ad" src="../images/1.png" alt="">
<div class="end">广告已结束</div>
<script>
//5秒关闭广告
var ad=document.querySelector('.ad')
var div=document.querySelector('.djs')
var end=document.querySelector('.end')
var t=5
fun()
setInterval(fun,1000)
function fun() {
div.innerHTML=t
if (t==0){
ad.style.display='none'
div.style.display='none'
end.style.display='block'
}
t--
}
</script>
</body>
</html>效果演示
运行效果演示如下：
界面右上角显示倒计时数字。
逻辑解析
代码逻辑解析：
首先定义一个函数并声明全局变量t，用于存储倒计时的初始时间。在倒计时执行函数中，将div元素内的文本更新为当前剩余时间t。接着判断t是否等于0，若等于0则代表倒计时结束，此时隐藏广告图片和倒计时容器，同时显示“广告已结束”的提示框。
以上内容为本文全部介绍，希望对各位的学习有所启发，也欢迎大家继续支持本站。