JavaScript海报定时弹框设计

简介: tml代码如下: 网页的顶端海报弹框操作    JavaScript代码如下:  //记录次数 var i=0; //定时器id var timer; onload=function(){ ...

tml代码如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>网页的顶端海报弹框操作</title>
	</head>
	<body>
		<div id="ad" style="width:100%;display: none;">
			<img src="img/banner1.jpg" width="100%" />
		</div>
	</body>
</html>

  

 

JavaScript代码如下:

 

<script type="text/javascript">
	
		//记录次数
		var i=0;
		
		//定时器id
		var timer;
		
		onload=function(){
			//设置定时器 间隔4秒后展示图片
			timer=setInterval(showAd,4000);
		}
		
		//展示广告方法 展示2秒之后隐藏
		function showAd(){
			//展示的次数加1
			i++;
			
			//若i=3 清空由setinterval设置的定时器
			if(i==3){
				clearInterval(timer);
			}
			
			//1.获取广告
			var divObj=document.getElementById("ad");
			
			//2.修改广告的样式 将其显示
			divObj.style.display="block";
			
			//3.2秒之后隐藏 只执行一次
			setTimeout(hideAd,2000);
			
		}
		
		//隐藏广告
		function hideAd(){
			//1.获取广告
			var divObj=document.getElementById("ad");
			
			//2.修改样式 将其隐藏
			divObj.style.display="none";
		}
</script>

  

图片素材: banner1

 

 

 

分割线 
作者: 杨校

出处: http://www.cnblogs.com/xiaoxiao5016

分享是快乐的,也见证了个人成长历程,文章大多都是工作经验总结以及平时学习积累,基于自身认知不足之处在所难免,也请大家指正,共同进步。

本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出, 如有问题, 可邮件(397583050@qq.com)咨询。

 

目录
相关文章
|
9月前
|
JavaScript
selenium--操作JS弹框
selenium--操作JS弹框
|
10月前
|
JavaScript
JS实现定时自动更换DIV或页面背景图片
JS实现定时自动更换DIV或页面背景图片
193 0
|
9月前
|
JavaScript 前端开发
详解用js实现弹框列表功能
详解用js实现弹框列表功能
87 0
|
9月前
|
JavaScript 前端开发
JavaScript 输出与弹框
JavaScript 输出与弹框
|
10月前
|
JavaScript 前端开发
javascript定时显示数组元素
javascript定时显示数组元素
43 0
|
10月前
|
JavaScript
JS最简单的定时累加计数器
JS最简单的定时累加计数器
87 0
|
10月前
|
JavaScript
js定时循环输出数组的值
js定时循环输出数组的值
58 0
|
10月前
|
JavaScript 数据可视化
Echarts动态数据可视化学习(1)通过js自动定时产生动态数组数据
Echarts动态数据可视化学习(1)通过js自动定时产生动态数组数据
75 0
|
12月前
|
JavaScript 前端开发
前端祖传三件套JavaScript的BOM的弹框
在前端开发中,弹框是一个非常重要的组件。JavaScript BOM 提供了几个内置的方法来弹出和关闭弹框,包括 alert()、confirm() 和 prompt() 方法。这些方法都非常简单易用,可以让我们轻松地向用户显示信息或获取用户输入。在本文中,我们将深入探讨 JavaScript BOM 的弹框方法,并介绍其中一些常用的属性和用法。
76 0
|
JavaScript 前端开发
使用Js定时器来定时跳转
记录:想实现在5秒后跳转到指定页面,使用到JS定时器和Location对象。
127 0