<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
div{
width:500px;
height:300px;
margin:50px auto;
background: #0000FF;
}
a{
float:right;
width:80px;
height:40px;
background:pink;
line-height:40px;
text-align:center;
color:white;
text-decoration: none;
}
</style>
</head>
<body>
<!--设置div 设置a-->
<!--a href=javascript:;控制窗口跳转-->
<!--先获取div和a标签-->
<!--再设置定时器,先默认让时间为5秒-->
<!--给oBtn绑定点击事件：当点击a的时候让div出现
（先判断是否为零，如果为零的话，执行输出
"关闭"）如果不为零执行i++，i；可以把点击
事件放在setinterval里面。在其中还可以
设置三秒的延迟关闭的时间--
注意：倒计时在盒子里面
不是通过id名获取的，用document.querySelector>-->
<!--i从5开始-->
<!--因为是在点击关闭之后出现三秒的延迟时间的，所以在if后面设置关闭的函数-->
<div>
<a href=" ">5</a >
</div>
<script type="text/javascript">
var oDiv=document.querySelector("div");
var oBtn=document.querySelector("a");
var timer=null
var i=5
timer=setInterval(function(){
if(i==0){
oBtn.innerHTML="关闭";
clearInterval(timer);
oBtn.onclick=function(){
setTimeout(function(){
oDiv.style.display="none";
}
,3000)
}
}else{
i--
oBtn.innerHTML=i;
}
}
,1000)
</script>
</body>
</html>
网友评论