定时器
setInterval()循环定时器 ,周而复始的执行
setTimeout()炸弹定时器,用完以后报废
var num=0;
setInterval(function () {
console.log(num);
num++;
},1000);
1.五秒关闭广告
<script>
window.function () {
var imgArr=document.getElementsByTagName("img");
setTimeout(fn,2000);
function fn() {
imgArr[0].style.display="none";
imgArr[1].style.display="none";
}
}
</script>
2.模拟京东关闭广告
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding:0;
}
.site-nav{
height:30px;
background-color: #cccccc;
}
.top-banner{
opacity: 1;
background-color: blue;
}
.w{
width:1210px;
height: 80px;
margin: 0px auto;
background-color: pink;
}
.search{
width:1210px;
height: 80px;
margin: 0px auto;
background-color: burlywood;
}
a{
position: absolute;
top:40px;
right:210px;
width:25px;
height: 25px;
text-align: center;
line-height: 25px;
background-color: #000;
color: #fff;
text-decoration: none;
}
</style>
</head>
<body>
<div class="site-nav"></div>
<div class="top-banner">
<div class="w">
<a href="#">X</a>
</div>
</div>
<div class="search">
</div>
<script>
var topBanner=document.getElementsByClassName("top-banner")[0];
var a=topBanner.children[0].firstElementChild||topBanner.children[0].firstChild;
var timer=null;
a.function () {
timer=setInterval(function () {
topBanner.style.opacity-=0.1;
if(topBanner.style.opacity<0){
topBanner.style.display="none";
clearInterval(timer);
}
},50);
}
</script>
</body>
</html>