js写一个简易小广告逐渐上升(右下角)

ゞ浴缸里的玫瑰 2022-03-12 02:24 159阅读 0赞

*  **小广告效果图:**  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NDMxMzAz_size_16_color_FFFFFF_t_70]
 *  **代码如下**

<!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>
    			    毕业顺利,前程似锦,苟富贵,勿相忘@
    		    <br><br>
    		        2019/3/4 晚上 22:05 <br>    (写毕业设计,睡觉)
    		</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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NDMxMzAz_size_16_color_FFFFFF_t_70]: /images/20220312/15cd3f996390422cb38713733e975873.png