<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小广告</title>
<style>
* {
padding: 0;
margin: 0;
}
.ad {
width: 200px;
height: 200px;
border: 1px solid black;
position: fixed;
right: 0;
bottom: 0;
}
.ad>p {
display: flex;
justify-content: space-between;
}
.closeBtn {
padding: 0 4px;
}
</style>
</head>
<body>
<div class="ad" id="ad">
<p>
<span class="countdown" id="countdown"></span>
<input type="button" value="x" class="closeBtn" id="closeBtn">
</p>
</div>
<script>
let ad = document.getElementById('ad');
let countdown = document.getElementById('countdown');
let closeBtn = document.getElementById('closeBtn');
// 设置初始位置
let position = -ad.offsetHeight;
ad.style.bottom = position + "px";
// 设置初始事件
let time = 5;
countdown.innerText = time + '秒';
let upInterval = setInterval(function () {
position++;
if (position >= 0) {
clearInterval(upInterval);
countDown();
} else {
ad.style.bottom = position + "px";
}
}, 10)
function countDown() {
let timeInterval = setInterval(function () {
time--;
if (time < 0) {
clearInterval(timeInterval);
ad.style.display = 'none';
} else {
countdown.innerText = time + '秒';
}
}, 1000)
closeBtn.onclick = function () {
clearInterval(timeInterval);
ad.style.display = 'none';
}
}
// 获取元素尺寸：
// offsetHeight/offsetWidth：width + padding + border
// clientHeight/clientWidth：width + padding
</script>
</body>
</html>
转载于:https://www.cnblogs.com/xiaozhou619/p/9762559.html
