JavaScript实现倒计时自动关闭广告

作者:异步漫步时间:2026-10-24 07:50:20浏览:224

本文介绍如何使用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>

效果演示

运行效果演示如下:

JavaScript实现倒计时自动关闭广告

界面右上角显示倒计时数字。

JavaScript实现倒计时自动关闭广告

JavaScript实现倒计时自动关闭广告

逻辑解析

代码逻辑解析:

首先定义一个函数并声明全局变量t,用于存储倒计时的初始时间。在倒计时执行函数中,将div元素内的文本更新为当前剩余时间t。接着判断t是否等于0,若等于0则代表倒计时结束,此时隐藏广告图片和倒计时容器,同时显示“广告已结束”的提示框。

以上内容为本文全部介绍,希望对各位的学习有所启发,也欢迎大家继续支持本站。

作者最新文章