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，那么倒计时结束，将图片与倒计时盒子隐藏，显示广告已结束的盒子。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了JavaScript实现获取两个排序数组的中位数算法,涉及javascript数组遍历及数值计算相关操作技巧,需要的朋友可以参考下2019-02-02
本文给大家简单介绍了在一个项目中涉及到的javascript使用闭包模拟对象的私有属性和方法，这里记录下来，分享给大家。2016-10-10
微信小程序使用this.setData()遇到的问题及解决方案详解
this.setData估计是小程序中最经常用到的一个方法,但是要注意其实他是有限制的,忽略这些限制的话,会导致数据无法更新,下面这篇文章主要给大家介绍了关于微信小程序使用this.setData()遇到的问题及解决方案,需要的朋友可以参考下2022-08-08
本篇文章主要是对js数组去重的三种常用方法进行了总结介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-01-01
理解Javascript_15_作用域分配与变量访问规则,再送个闭包
在阅读本博文之前，请先阅读《理解Javascript_13_执行模型详解》 在'执行模型详解'中讲到了关于作用域分配的问题，这一篇博文将详细的说明函数对象、作用域链与执行上下文的关系。2010-10-10
微信小程序官方组件也提供了画布功能，下面分享一下如何创建微信小程序画布时钟2016-12-12
javascript 变量声明 var,let,const 的区别
这篇文章主要介绍了javascript 变量声明 var,let,const 的区别,变量声明，每种编程语言必不可少的语法，在javascript中，变量的声明相对其他语言来说，算是比较简单的。更多相关的具体内容需要的小伙伴可以参考一下2022-06-06
这篇文章主要给大家介绍了关于如何利用Typescript封装本地存储的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2022-01-01
这篇文章主要为大家详细介绍了微信小程序uniapp添加悬浮菜单，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要介绍了js实现获取焦点后光标在字符串后，原理就是获得焦点后重新把自己复制粘帖一下，喜欢的朋友可以看看2014-09-09
最新评论