欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

倒计时5S秒自动关闭弹窗

程序员文章站 2022-07-05 15:35:37
弹窗文字内容 x 倒计时s自动关闭 ......
<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body{position:relative;height:800px;}
			#wrap{width:300px;height:200px;background:#fafafa;box-shadow:5px 5px 5px #c9c9c9;position:absolute;top:50%;left:50%;margin-top:-100px;margin-left:-150px;}
			#close{position:absolute;right:0;font-size:20px;right:15px;top:5px;cursor:pointer;}
			.txt{max-height:100px;padding-top:30px;text-align:center;line-height:150px;}
			.tip{position:absolute;bottom:0;text-align:center;border-top:1px solid #ccc;padding:6px 0;width:100%;}
			#time{color:red;}
		</style>
	</head>
	<body>
		<div id="wrap">
			<div class="txt">弹窗文字内容</div>
			<div id="close">x</div>
			<div class="tip">倒计时<span id="time"></span>s自动关闭</div>
		</div>
		<script>
			window.onload=function(){
				var box=document.getelementbyid("wrap");
				var obj=document.getelementbyid("time");
				var close=document.getelementbyid("close");
				var num=10;
				obj.innerhtml=num;
				
				function timfn(){
					num--;
					obj.innerhtml=num;
					if(num == 0){
						box.style.display="none";
					}
				}
				setinterval(timfn,1000);
				close.onclick=function(){
					box.style.display="none";
				}
			}
		</script>
	</body>
</html>