<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
background-color: gray;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
line-height: 2;
display: none;
}
div p:nth-of-type(1) {
text-align: right;
}
</style>
</head>
<body>
<div id="div1">
<p id="p1">
×
</p>
<h2>
好广告
</h2>
<h2>
请联系我
</h2>
<p id="p2">
10s广告自动关闭
</p>
</div>
<script>
function shouad() {
var t1 = setTimeout(function () {
$('div1').style.display = 'block'
//手动关闭
$('p1').onclick = function () {
$('div1').style.display = 'none'
shouad()
}
var count = 10;
$('p2').innerHTML = count + 's后自动关闭';
clearInterval(t2)
t2 = setInterval(function () {
count--;
$('p2').innerHTML = count + 's广告自动结束'
if (count < 0) {
clearInterval(t2) //要使用清除定时器的语句
$('div1').style.display = 'none'
shouad()
}
}, 1000)
}, 2000)
}
shouad()
var t2
function $(id) {
return document.getElementById(id)
}
</script>
</body>
</html>
</body>
</html>
