js写一个简易小广告逐渐上升(右下角)_js写一个小广告,在右下角慢慢滑上来-CSDN博客

本文链接：https://blog.csdn.net/qq_38431303/article/details/88142726

小广告效果图:
代码如下

<!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
		<div class="ad" id="ad">
		<p>
		<span class="countdown" id="countdown"></span>
		<input type="button" value="x" class="closeBtn" id="closeBtn">
		</p>
		<br>
		通知全体成员:
		<br><br>
			&nbsp;&nbsp;&nbsp;&nbsp;毕业顺利,前程似锦,苟富贵,勿相忘@
		    <br><br>
		    &nbsp;&nbsp;&nbsp;&nbsp;2019/3/4 晚上 22:05 <br>&nbsp;&nbsp;&nbsp;&nbsp;(写毕业设计,睡觉)
		</div>
//js开始
<script>
var ad = document.getElementById('ad');
var countdown = document.getElementById('countdown');
var closeBtn = document.getElementById('closeBtn');
// 设置初始位置
var position = -ad.offsetHeight;
ad.style.bottom = position + "px";
// 设置初始事件
var time = 5;
countdown.innerText = time + '秒';
//广告上升
var upInterval = setInterval(function () {
position++;
if (position >= 0) {
clearInterval(upInterval);
countDown();
} else {
ad.style.bottom = position + "px";
}
}, 10)
//倒计时   广告下降
function countDown() {
var 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';
}
}
</script>
</body>
</html>