JS:简单的页面广告制作（右下角广告可自动消失）

本文链接：https://blog.csdn.net/qq_50906590/article/details/121127652

html页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>广告实验</title>
		<style>
		body{
			margin: 0;
			padding: 0;
		}
		.web{
			width: 950px;
			height: 1000px;
			background-color: #cecece;
			border: #666666 1px solid;
			margin: 0 auto;
			padding: 20px;
		}
		.top{
			width: 950px;
			height: 1000px;
			margin: 0 auto;
			padding: 20px;
			
		}
		</style>
	</head>
	<body>
	     <div class="web">
			<h1>各地出台具体措施保障“菜篮子”安全</h1>
			<p>近日，各地出台具体措施保障“菜篮子”安全，确保今冬明春蔬菜等生活必需品市场保供稳价。</p>
		<img src="imgs/top.png"  alt="#" class="top" />
		 </div>
		 <script src = "./guanggao.js" type="text/javascript"></script>
	</body>
	   
		
	
</html>

js页面

//定义广告两边的初始属性
var l_width = "100px";
var l_height = "250px";
var l_img="imgs/ad1.jpg";
var l_img1="imgs/ad2.jpg";
var l_close="imgs/close.png";

//创建广告容器的div  左边
var l_left =document.createElement("div");
l_left.style.width = l_width;                   /* 定义左边容器的长 ,连接上面已定义*/
l_left.style.height = l_height;                   /* 定义左边容器的高，上面已定义*/
l_left.style.padding="0px";                     /* 内边距属性*/
l_left.style.position="absolute";               /* Position属性规定元素的定位类型    绝对的*/
l_left.style.left = "30px";



//创建广告容器的div    右边
var l_right =document.createElement("div");
l_right.style.width = l_width;                   /* 定义右边容器的长 ,连接上面已定义*/
l_right.style.height = l_height;                   /* 定义右边容器的高，上面已定义*/
l_right.style.padding="0px";                     /* 内边距属性*/
l_right.style.position="absolute";               /* Position属性规定元素的定位类型    绝对的*/
l_right.style.right= "30px";


//创建广告容器的div  下
var l_down =document.createElement("div");
l_down.id = "down";                              /* 给一个值为id:down*/
l_down.style.width = "300px";                   /* 定义容器的长 ,连接上面已定义*/
l_down.style.height = "250px";                   /* 定义容器的高，上面已定义*/
l_down.style.padding="0px";                     /* 内边距属性*/
l_down.style.position="absolute";               /* Position属性规定元素的定位类型    绝对的*/
l_down.style.right = "10px";
l_down.style.top = "450px";

//创建 img 元素，并加入到 l_left 中，作为广告图片
var limg1=document.createElement("img");
limg1.src=l_img;
l_left.appendChild(limg1);

//创建 img 元素，并加入到 l_right 中，作为广告图片
var limg2=document.createElement("img");
limg2.src=l_img;
l_right.appendChild(limg2);

//创建 img 元素，并加入到 l_down 中，作为广告图片
var limg3=document.createElement("img");
limg3.src=l_img1;
l_down.appendChild(limg3);


//创建关闭按钮，并加入到 l_left 中
var closeimg1=document.createElement("img");
closeimg1.src=l_close;
closeimg1.style.width="50px";
closeimg1.style.position="relative";
closeimg1.style.left="50px";
closeimg1.style.top="-20px";
closeimg1.style.cursor="pointer";
l_left.appendChild(closeimg1);

//创建关闭按钮，并加入到 l_right 中
var closeimg2=document.createElement("img");
closeimg2.src=l_close;
closeimg2.style.width="50px";
closeimg2.style.position="relative";
closeimg2.style.right="0px";
closeimg2.style.top="-20px";
closeimg2.style.cursor="pointer";
l_right.appendChild(closeimg2);

//创建关闭按钮，并加入到 l_down 中
var closeimg3=document.createElement("img");
closeimg3.src=l_close;
closeimg3.style.width="50px";
closeimg3.style.position="relative";
closeimg3.style.right="0px";
closeimg3.style.top="0px";
closeimg3.style.cursor="pointer";
l_down.appendChild(closeimg3);

//将l_left添加到html中
document.documentElement.appendChild(l_left);

//将l_right添加到html中
document.documentElement.appendChild(l_right);

//定时，在页面更新的几秒之后把l_down添加到html页面中
window.setTimeout(function(){
	document.documentElement.appendChild(l_down);
},1000)

//为关闭按钮注册单击事件，实现关闭广告功能
closeimg1.addEventListener("click", function(){
	this.parentNode.style.display="none";
})
closeimg2.addEventListener("click", function(){
	this.parentNode.style.display="none";
})
closeimg3.addEventListener("click", function(){
	this.parentNode.style.display="none";
})

//编写代码，实现对联广告随滚动条移动
	//scrollTop 代表由于滚动隐藏的高度
window.addEventListener("scroll",function(){
	var st1=document.documentElement.scrollTop||document.body.scrollTop;
	l_left.style.top=(st1+20)+"px";
	l_right.style.top=(st1+20)+"px";
	l_down.style.top=(st1+450)+"px";
})

window.setTimeout(function(){
	document.getElementById("down").innerHTML = ""; //设置10秒后 id值为空  广告自然消失
},10000)  //10000毫秒  1000毫秒=1秒

本人图片文件在imgs下，图片各位老板可以自行添加

视频详细讲解请移步bilibili:小安小安la (感谢各位老板！)