javascript实现倒计时关闭广告
更新时间：2021年02月09日 10:34:51 作者：爱前端的茂茂
这篇文章主要为大家详细介绍了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，然后t就是倒计时的时间，我们在倒计时函数里面将div里面显示的文字改为我们的倒计时t，然后来判断t是否等于0，如果等于0，那么倒计时结束，将图片与倒计时盒子隐藏，显示广告已结束的盒子。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
写js时遇到的一些小问题,需要的朋友可以参考下。2010-12-12
JavaScirpt中有很多对象合并的方法,今天就做个笔记,记录一下这些方法,下面这篇文章主要介绍了javaScript合并对象的多种方式,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-05-05
这里给大家推荐一款自己封装的js时间日期格式化的函数，非常的简洁实用，分享给有需要的小伙伴2014-12-12
这篇文章主要介绍了js正则表达式中exec用法,实例分析了javascript中使用exec执行正则表达式的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-07-07
Boostrap提供了12种JavaScript插件，在本文中给大家介绍了，不知道的朋友可以参考下，本文重点给大家介绍bootstrap基础之js插件，感兴趣的朋友一起学习吧2016-09-09
最近华为鸿蒙OS 2.0正式开源！关于鸿蒙的教程其实网上也已经有一些尝鲜的小伙伴分享了相关文章，这篇文章主要为大家详细介绍了鸿蒙系统中的 JS 开发框架，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-09-09
这篇文章主要介绍了使用 Opentype.js 生成字体子集,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-05-05
这篇文章主要为大家详细介绍了JS命令模式例子之菜单程序,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-10-10
这篇文章主要介绍了JavaScript时间操作之级联日期选择操作，涉及到年、月、日、星期，感兴趣的小伙伴们可以参考一下2016-01-01
js keycode快捷键大全 并附有简单使用说明，方便大家使用。2010-10-10
最新评论