<!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>
div {
width: 200px;
height: 200px;
background-color: #c1c1c1;
position: fixed;
right: 0;
bottom: 0px;
display: flex;
justify-content: space-between
}
#x {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: red;
color: #fff;
display: flex;
justify-content: center;
}
button {
width: 20px;
height: 20px;
}
</style>
</head>
<body>
<div>
<span id="js"></span>
<button>X</button>
</div>
<script>
let div = document.querySelector('div');
let button = document.querySelector('button');
let js = document.getElementById('js');
let height = -div.offsetHeight;
div.style.bottom = height + "px"; //获取div整个高把高度给bottom属性并把固定定位的bottom
let time = 5;
js.innerText = time + "s后关闭";
//广告栏往上升
let counter = setInterval(function () {
if (height < 0) {
height++;
div.style.bottom = height + "px";
} else if (height == 0) {
//关闭时间倒计时
let shut = setInterval(function () {
if (time > 0) {
time--;
js.innerText = time + "s后关闭";
} else {
div.style.display = "none";
clearInterval(shut);
}
//点击X关闭
button.onclick = function () {
clearInterval(shut);
div.style.display = "none";
}
}, 1000);
clearInterval(counter);
}
}, 10);
</script>
</body>
</html>