案例三：广告弹窗的定时弹出与清除

最新推荐文章于 2023-04-11 20:56:48 发布
最新推荐文章于 2023-04-11 20:56:48 发布
阅读量1.1k 收藏 4
点赞数
分类专栏： JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhanshixiang/article/details/90523835
版权

需求：页面加载后几秒钟，显示一个广告弹出框，显示完设置的时间后自动隐藏。
         * 第一步：在页面指定位置隐藏一个广告图片(使用display属性中的none)
         * 第二步：确定时间onload()并绑定一个函数
         * 第三步：书写这个函数(设置一个显示图片的定时操作)
         * 第四步：书写定时器中的函数(将指定位置的隐藏图片的style属性中的display值设置为block)
         * 第五步：清除图片的定时操作
         * 第六步：书写隐藏图片的操作
         * 第七步：书写定时器中的函数(将指定位置的图片的display设置为none)
         * 第八步：清除隐藏图片的定时操作。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>首页</title>
		<style>
			#father{
				border: 0px solid red;
				width: 1300px;
				height: 2170px;
				margin: auto;
			}
			/*#logo{
				border: 0px solid black;
				width: 1300px;
				height: 50px;
			}*/
			.top{
				border: 0px solid blue;
				width: 431px;
				height: 50px;
				float: left;
			}
			#top{
				padding-top: 12px;
				height: 38px;
			}
			#menu{
				border: 0px solid red;
				width: 1300px;
				height: 50px;
				background-color: black;
				margin-bottom: 10px;
			}
			ul li{
				display: inline;
				color: white;
			}
			#clear{
				clear: both;
			}
			
			#product{
				border: 0px solid red;
				width: 1300px;
				height: 558px;
			}
			#product_top{
				border: 0px solid blue;
				width: 100%;
				height: 45px;
				padding-top: 8px;
			}
			#product_bottom{
				border: 0px solid green;
				width: 100%;
				height: 500px;
			}
			#product_bottom_left{
				border: 0px solid red;
				width: 200px;
				height: 500px;
				float: left;
			}
			#product_bottom_right{
				border: 0px solid blue;
				width: 1094px;
				height: 500px;
				float: left;
			}
			#big{
				border: 0px solid red;
				width: 544px;
				height: 248px;
				float: left;
			}
			.small{
				border: 0px solid blue;
				width: 180px;
				height: 248px;
				float: left;
				/*让里面的内容居中*/
				text-align: center;
			}
			
			#bottom{
				text-align: center;
			}
			
			a{
				text-decoration: none;
			}
		</style>
		
		<!--<script type="text/javascript">
		
		/** 案例一
		 *  图片轮播实现
		 *  1、确定所要使用的事件 onload()
		 *  2、事件里面指定触发函数 init();
		 *  3、书写函数，设置定时，以及所要循环的函数
		 *  4、编写轮播切换图片函数
		 <!--* 
		 */
		
		
		/**案例三
		 * 广告弹窗的定时弹出与清除
		 * 需求：页面加载后几秒钟，显示一个广告弹出框，显示完设置的时间后自动隐藏。用户也可在弹窗以出现就点击关闭
		 * 第一步：在页面指定位置隐藏一个广告图片(使用display属性中的none)
		 * 第二步：确定时间onload()并绑定一个函数
		 * 第三步：书写这个函数(设置一个显示图片的定时操作)
		 * 第四步：书写定时器中的函数(将指定位置的隐藏图片的style属性中的display值设置为block)
		 * 第五步：清除图片的定时操作
		 * 第六步：书写隐藏图片的操作
		 * 第七步：书写定时器中的函数(将指定位置的图片的display设置为none)
		 * 第八步：清除隐藏图片的定时操作。
		 *
		 */
		
		
	      //3、轮播图的定时函数操作
		   var i=1;
		    function init(){
		   
		    window.setInterval("changeImg()",2000);
		    
		    //设置广告图片的定时操作
		    time =window.setInterval("ShowAd()",3000);
		    
		   
		 	
		 }
		 //4、轮播函数切换图片
		    var i=0;
		    function changeImg(){
		 	i++;
		   document.getElementById("img1").src="../img/"+i+".jpg"
		   if(i==3){
		     i=0
		 }

		 }
		 //编写显示广告图片的函数
		function ShowAd(){
			//修改之前图片隐藏为经历指定时间段以后显示图片
		    var adEle=document.getElementById("img2");
		    adEle.style.display="block";
		    //清除显示图片的操作
		 	window.clearInterval(time);
		   //书写隐藏图片的操作
		    time= window.setInterval("hiddenAd()",3000);
		 }
		 function hiddenAd(){
		 	 document.getElementById("img2").style.display="none";
		    clearInterval(time)	  
		 }
		 
		 
		</script>
		-->
		
		<script type="text/javascript" src="../js/轮播图片.js"></script>
		
	</head>
	<body onload="init()">
		<div id="father">
			
		 <!-- 定时弹出广告的图片的位置-->
		 <img src="../img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg" width="100%" style="display:none" id="img2" />
			
			<!--1.logo部分-->
			<div id="logo">
				<div class="top">
					<img src="../img/logo2.png" height="46px"/>
				</div>
				<div class="top">
					<img src="../img/header.png" height="46px" />
				</div>
				<div class="top" id="top">
					<a href="#">登录</a>
					<a href="#">注册</a>
					<a href="#">购物车</a>
				</div>
			</div>
			<div id="clear">
				
			</div>
			<!--2.导航栏部分-->
			<div id="menu">
				<ul>
					<a href="#"><li style="font-size: 20px;">首页</li></a>&nbsp;&nbsp;&nbsp;&nbsp;
					<a href="#"><li>手机数码</li></a>&nbsp;&nbsp;&nbsp;&nbsp;
					<a href="#"><li>家用电器</li></a>&nbsp;&nbsp;&nbsp;&nbsp;
					<a href="#"><li>鞋靴箱包</li></a>&nbsp;&nbsp;&nbsp;&nbsp;
					<a href="#"><li>孕婴保健</li></a>&nbsp;&nbsp;&nbsp;&nbsp;
					<a href="#"><li>奢侈品</li></a>
				</ul>
			</div>
			<!--3.轮播图部分-->
			<div id="" >
				<img src="../img/1.jpg" width="100%" id="img1"/>
			</div>
			<!--4.最新商品-->
			<div id="product">
				<div id="product_top">
					&nbsp;&nbsp;&nbsp;
					<span style="font-size: 25px;padding-top: 8px;">最新商品</span>&nbsp;&nbsp;&nbsp;
					<img src="../img/title2.jpg" />
				</div>
				<div id="product_bottom">
					<div id="product_bottom_left">
						<img src="../img/big01.jpg" width="100%" height="100%"/>
					</div>
					<div id="product_bottom_right">
						<div id="big">
							<a href="#"><img src="../img/middle01.jpg" width="100%" height="100%"/></a>
						</div>
						<div class="small">
							<img src="../img/small03.jpg" />
							<a href="#"><p style="color: gray;">电炖锅</p></a>
							<p style="color: red;">¥399</p>
						</div>
						<div class="small">
							<img src="../img/small03.jpg" />
							<a href="#"><p style="color: gray;">电炖锅</p></a>
							<p style="color: red;">¥399</p>
						</div>
						<div class="small">
							<img src="../img/small03.jpg" />
							<a href="#"><p style="color: gray;">电炖锅</p></a>
							<p style="color: red;">¥399</p>
						</div>
						<div class="small">
							<img src="../img/small03.jpg" />
							<a href="#"><p style="color: gray;">电炖锅</p></a>
							<p style="color: red;">¥399</p>
						</div>
						<div class="small">
							<img src="../img/small03.jpg" />
							<a href="#"><p style="color: gray;">电炖锅</p></a>
							<p style="color: red;">¥399</p>
						</div>
						<div class="small">
							<img src="../img/small03.jpg" />
							<a href="#"><p style="color: gray;">电炖锅</p></a>
							<p style="color: red;">¥399</p>
						</div>
						<div class="small">
							<img src="../img/small03.jpg" />
							<a href="#"><p style="color: gray;">电炖锅</p></a>
							<p style="color: red;">¥399</p>
						</div>
						<div class="small">
							<img src="../img/small03.jpg" />
							<a href="#"><p style="color: gray;">电炖锅</p></a>
							<p style="color: red;">¥399</p>
						</div>
						<div class="small">
							<img src="../img/small03.jpg" />
							<a href="#"><p style="color: gray;">电炖锅</p></a>
							<p style="color: red;">¥399</p>
						</div>
					</div>
				</div>
			</div>
			<!--5.广告图片-->
			<div id="">
				<img src="../img/ad.jpg" width="100%"  />
			</div>
			<!--6.热门商品-->
			<div id="product">
				<div id="product_top">
					&nbsp;&nbsp;&nbsp;
					<span style="font-size: 25px;padding-top: 8px;">热门商品</span>&nbsp;&nbsp;&nbsp;
					<img src="../img/title2.jpg" />
				</div>
				<div id="product_bottom">
					<div id="product_bottom_left">
						<img src="../img/big01.jpg" width="100%" height="100%"/>
					</div>
					<div id="product_bottom_right">
						<div id="big">
							<a href="#"><img src="../img/middle01.jpg" width="100%" height="100%"/></a>
						</div>
						<div class="small">
							<img src="../img/small03.jpg" />
							<a href="#"><p style="color: gray;">电炖锅</p></a>
							<p style="color: red;">¥399</p>
						</div>
						<div class="small">
							<img src="../img/small03.jpg" />
							<a href="#"><p style="color: gray;">电炖锅</p></a>
							<p style="color: red;">¥399</p>
						</div>
						<div class="small">
							<img src="../img/small03.jpg" />
							<a href="#"><p style="color: gray;">电炖锅</p></a>
							<p style="color: red;">¥399</p>
						</div>
						<div class="small">
							<img src="../img/small03.jpg" />
							<a href="#"><p style="color: gray;">电炖锅</p></a>
							<p style="color: red;">¥399</p>
						</div>
						<div class="small">
							<img src="../img/small03.jpg" />
							<a href="#"><p style="color: gray;">电炖锅</p></a>
							<p style="color: red;">¥399</p>
						</div>
						<div class="small">
							<img src="../img/small03.jpg" />
							<a href="#"><p style="color: gray;">电炖锅</p></a>
							<p style="color: red;">¥399</p>
						</div>
						<div class="small">
							<img src="../img/small03.jpg" />
							<a href="#"><p style="color: gray;">电炖锅</p></a>
							<p style="color: red;">¥399</p>
						</div>
						<div class="small">
							<img src="../img/small03.jpg" />
							<a href="#"><p style="color: gray;">电炖锅</p></a>
							<p style="color: red;">¥399</p>
						</div>
						<div class="small">
							<img src="../img/small03.jpg" />
							<a href="#"><p style="color: gray;">电炖锅</p></a>
							<p style="color: red;">¥399</p>
						</div>
					</div>
				</div>
			</div>
			<!--7.广告图片-->
			<div id="">
				<img src="../img/footer.jpg" width="100%"/>
			</div>
			<!--8.友情链接和版权信息-->
			<div id="bottom">
				<a href="#">关于我们</a>
				<a href="#">联系我们</a>
				<a href="#">招贤纳士</a>
				<a href="#">法律声明</a>
				<a href="#">友情链接</a>
				<a href="#">支付方式</a>
				<a href="#">配送方式</a>
				<a href="#">服务声明</a>
				<a href="#">广告声明</a>
				<p>
					Copyright © 2005-2016  版权所有 
				</p>
			</div>
		</div>
	</body>
</html>

经过3秒以后，图片消失。

真香号
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
案例分析 ： 架构设计与评估 Xmind格式 思维导图
09-27
案例分析 ： 架构设计与评估 Xmind格式 思维导图
html广告框,html5 右下角弹出 广告框
weixin_42503415的博客
06-25 330
.ad {position: fixed;right: 0;bottom: 0;width: 230px;height: 120px;background-image: url(imgs/ad.jpg);display: none;}.ad span {position: absolute;right: 0;top: 0;width: 40px;height: 18px;background-im...
简单的jQuery实现右下角弹出广告
weixin_34290096的博客
11-16 513
在网上我们经常打开一个网页时候 经常看到右下角弹出一个对话框广告出来 感觉蛮好奇的 以前用javascript写一个这样的 比较复杂 要用dom节点什么的 今天用个jquery写个这样的非常简单 就用jquery中的slideDown和slideUp这两个方法就可以轻松搞定！下面是HTML代码： <!DOCTYPEhtmlPU...
js 定时器 图片轮播 广告弹窗 计数器 ,vue基础
weixin_52474819的博客
04-11 116
中文网 https://cn.vuejs.org/v2/guide/Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。是一个用于创建用户界面的开源JavaScript框架，也是一个创建单页应用的Web应用框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。MVVM模型。
打开app的时候有一个3秒或者5秒的广告页
m0_63873004的博客
11-23 627
打开app的时候有一个3秒或者5秒的广告页
c#的Winform弹窗定时功能，实现可以自定义显示一段时间然后弹窗自动消失
qq_41464425的博客
07-25 4790
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Windows.Forms; using System.Threading; namespace Common { public class AutoClosingMessageBox { public System.Threading.Timer _timeoutTimer;.
案例2：《角的度量整理与复习》教学设计方案.pdf
02-22
案例2：《角的度量整理与复习》教学设计方案
案例三：公共管理伦理与强拆.ppt
03-09
案例三：公共管理伦理与强拆.ppt
运筹学案例二：SYTECH 公司的生产优化问题
05-02
运筹学案例二：SYTECH 公司的生产优化问题
页面右下角弹广告案例
qizhichao110的专栏
01-22 1597
$(function () {             //点击按钮在页面右下方弹出一个广告             $('#btn').click(function () {                 //第一步：在页面右下角创建一个层                 var dvObj = $('').appendTo($('body'));                 /
教你一天玩转JavaScript(四)——使用JavaScript实现定时弹出广告定时隐藏广告
05-02
教你一天玩转JavaScript(四)——使用JavaScript实现定时弹出广告定时隐藏广告
一天搞定jQuery(一)——使用jQuery完成定时弹出广告
05-09
一天搞定jQuery(一)——使用jQuery完成定时弹出广告
免屏蔽广告弹窗代码，亲测可用
08-21
目前对网页弹窗的呼声很高，本应鄙视这种行为，但是既然有市场需求就有存在的理由，耍流氓容易，但耍一个不彻底的流氓却是要费脑筋的。
桌面清理工具
05-13
自己用python写的桌面清理小工具，配置文件填写保留文件，目录执行脚本，桌面瞬间变干净，相关清理文件会备份到配置目录
广告的定时显示和定时隐藏
09-15 259
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>广告的自动显示与隐藏</title> <style> #content{width:100%;height:500px;background:#999} ...
零基础学习Vue: 第28课 Vue子组件实现弹窗广告效果小案例：
舜岳的博客
04-24 1256
零基础学习Vue: 第28课 Vue实现弹窗广告效果小案例： 原理： 通过子组件的$emit向父组件发射事件触发父主件内的函数方法使得父主件属性动态改变，再通过v-if实现显示 隐藏 / 弹窗 效果！ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <...
网页打开5秒后弹出广告窗口
哆来咪er的博客
05-11 7887
广告是网站不可避免的话题，没有广告的话，大多数网站是无法生存的。但是，若用户每次一打开网站就弹出广告窗口，这样会影响网站的友好性。现介绍一种广告被延迟加载的方式–setTimeout()。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>网页被打开5秒以后弹出广告窗口</title> <
java实现桌面右下角弹窗（模仿，类似于qq消息弹窗）
qq_337694336
01-08 6207
最近需要一个java实现桌面弹窗的小功能，类似于电脑桌面右下角的小广告一样的功能，在csdn上找到一个很好的一个，功能很多，我去除了一点不需要的代码，改了下外观等。 原作者：https://www.cnblogs.com/hgxbo/p/5508384.html 修改后的代码如下： InfoUtil.java import java.awt.BorderLayout; impor
打开网站，弹出广告网址
最新发布
07-27
- *3* [JavaWeb——JQuery之高级案例实战（打开网页自动弹出广告效果、抽奖效果实现）](https://blog.csdn.net/w464960660/article/details/107964773)[target="_blank" data-report-click={"spm":"1018.2226.3001....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

真香号

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值