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

2019-01-21 02:38:22来源：博客园阅读 ()

<!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>

原文链接:https://www.cnblogs.com/webdom/p/10276891.html
如有疑问请与原作者联系

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有