倒數計時5S秒自動關閉彈窗

勇淘未來發表於2019-01-16
<!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>

　　

相關文章