当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 倒计时5S秒自动关闭弹窗

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

2019年01月17日  | 移动技术网IT编程  | 我要评论 
<!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>

　　

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网