javascript实现倒计时关闭广告

2024-12-02 08:20:31

用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实现发送短信验证码后的倒计时功能(无视页面刷新，页面关闭不进行倒计时功能)

相关阅读: 基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭) 下面一段代码是小编给大家带来的js发送短信验证码后实现倒计时功能,代码简单易懂. 具体代码如下所示: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus
javascript实现倒计时关闭广告

用Javascript实现倒计时关闭广告案例正在学习大前端中,有代码和思路不规范不正确的地方往多多包涵,感谢指教在很多app与网页中,我们可以看到这样的广告:进入某个网站后,会弹出一个广告,然后广告会有倒计时,倒计时结束,这个广告便会消失,下面我们用代码来实现这一功能代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <t
Javascript实现关闭广告效果

用Javascript实现关闭广告案例,供大家参考,具体内容如下正在学习大前端中,有代码和思路不规范不正确的地方往多多包涵,感谢指教. 我们在网页中经常可以看见烦人的小广告,并且广告的旁边通常会有一个特定的位置和图标来关闭这个广告图.下面用JS代码来简单的实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Tit
javascript实现倒计时提示框

本文实例为大家分享了javascript实现倒计时提示框的具体代码,供大家参考,具体内容如下代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
JavaScript实现弹出广告功能

废话不多说了,直接给大家贴代码了,具体代码如下所示: <span style="white-space:pre"> </span>var i=0;//记录次数 var timer;//定时器id //设置弹出广告 onload=function(){ //间隔四秒展示一次广告 timer = setInterval(showAd,4000); } //展示2秒以后隐藏广告的方法 function showAd(){ i++;//展示的次数加1 //若i等于3清空
javascript页面倒计时实例

本文实例讲述了javascript页面倒计时实现方法.分享给大家供大家参考.具体实现方法如下: <html> <head> </head> <body> <input type="text" name="mss" id="mss"/> <form action="./index.html"> <input type="text"
基于javascript实现右下角浮动广告效果

本文实例为大家分享了基于javascript实现右下角浮动广告效果,供大家参考,具体内容如下效果图: 具体代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>右下角广告代码</title> <script type="text/javascript&q
javascript强制点击广告的方法

本文实例讲述了javascript强制点击广告的方法.分享给大家供大家参考.具体如下: 这里介绍的强制点击广告的JavaScript代码,先点击广告后下载地址才生效,或者是先点击广告后才会显示某部分内容,一般用于下载站或文档资料类网站,尽量不要多用哦,否则网站的用户体验会很差! 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/x
javascript显示倒计时控制按钮的简单实现

html: <a><span id="sendAgain" onclick="sendEmail()">2.再次发送激活邮件</span></a> (span控制点击事件,disabled无效) js: /*发送邮件*/ function sendEmail(){//发送邮箱认证邮件 var me = $("#sendAgain"); me.time = 60; (function() { if (
JavaScript页面倒计时功能完整示例

本文实例讲述了JavaScript页面倒计时功能.分享给大家供大家参考,具体如下: 效果图: 源码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>www.jb51.net JS倒计时</title> <style> h3{text-align:center;line-height:50px
layer弹出层倒计时关闭的实现方法

因为官方没有提供,只能自己实现了,包括按钮倒计时和标题倒计时,标题倒计时在注释部分: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.

javascript实现倒计时关闭广告

相关推荐

随机推荐