弹窗

最新推荐文章于 2025-07-16 15:49:30 发布

原创最新推荐文章于 2025-07-16 15:49:30 发布 · 154 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

26 篇文章

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			
			.show{
				width: 200px;
				height: 200px;
				
				border: 4px solid deeppink;
				color: deeppink;
				font:20px Courier New;
				cursor: pointer;
				border-radius:100px ;
				text-align: center;
				
				/* 设定上下居中,必须使用这两个属性 */
				line-height: 200px;
			    vertical-align: middle;
				
				background-image: url("img/pipixia.jpg");
				background-size: 400px 400px;
				background-repeat: no-repeat; /* 设置不重复 */
				
				/** CSS调整图片定位 */
				position:absolute;  /* 声明绝对定位,没有margin和padding */
				bottom: 0px;
				right: 0px;
				display:none ; /* 图片的隐藏 */
				
			}
		</style>
		<script type="text/javascript">
			var timer;
			window.onload=function(){
				
				timer = window.setTimeout("show()",3000);
				window.setTimeout("hide()",6000);
				
			}
			function show(){
				var d = document.getElementById("show");
				d.style.display = "block";
				/* window.setTimeout("hide()",3000); */
				window.clearTimeout(timer);
				
			}
			function hide(){
				var d = document.getElementById("show");
				d.style.display = "none";
				
			}
		</script>
	</head>
	<body>
		<div id="show" class="show">嘚~驾~</div>
	</body>
</html>