用JS寫煩人右下角的彈窗小廣告
阿新 • • 發佈：2019-01-04
啦啦啦啦，寫一下最近JS的學習進度。
最近JS學了DOM、正則、定時器…
用定時器寫了一個右下角的彈窗廣告。
先寫一下定時器的基本概念
週期定時器：setInterval(function，每間隔多少s執行)
一次定時器：setTimeout(function，間隔多少s執行一次)
定時器呼叫的時候：
var 執行緒1=null;
執行緒1=setInterval(moveUp,100); 定時器內呼叫函式不加括號
定時器停止：
clearInterval(執行緒1);
執行緒1=null; 釋放記憶體
功能如下：載入頁面的時候自動從下到上升起，按關閉鍵降下消失，過5s又再次升起。
首先先寫結構和樣式呈現上圖頁面的效果：
<html>
<head>
<style>
*{
margin: 0;
}
#box{
width: 180px;
height: 180px;
background-color: lightpink;
position: fixed;
right: 0;
bottom: -180px;
}
span{
cursor: pointer;
}
</style>
</head>
<body>
<div id="box">
< 其中，bottom為-180px，隱藏在頁面下方。JS的控制升降就是控制bottom的值。
以升起為例，先寫一個moveUp的函式：
var box=document.getElementById("box");
//moveUp 定時器
function moveUp(){
var css=document.defaultView.getComputedStyle(box,null);
//獲取box的所有CSS樣式
var 注意：
1.獲取id的CSS樣式，如果用Element.style.bottom只能獲得內聯樣式，defaultView.getComputedStyle( ,null)可以獲得id所有的CSS樣式，包括預設樣式。
2.用1方法獲得的樣式是"-180px"，我們所要更改的樣式不應該包括px，則通過pasreInt()獲得字串內的Number值，得到-180。
關閉廣告同理：
//moveDown 定時器
function moveDown(){
var css=document.defaultView.getComputedStyle(box,null);
var bottom=parseInt(css.bottom);
if(bottom!= -180){
bottom-=9;
box.style.bottom=bottom+"px";
}
else{
clearInterval(timer2);
timer2=null;
var timer3=null;
timer3=setTimeout(dakai,5000);
}
}
//按關閉鍵後關閉
var timer2=null;
function guanbi(){
clearInterval(timer1);
timer1=null;
timer2=setInterval(moveDown,100);}
注意：
1.在完全關閉後，設定一個timer3：setTimeout()定時器，為一次性定時器，在5s後再次升起廣告，達到“煩人”的效果。
2.在guanbi事件中，應先清除timer1，廣告升起的執行緒，然後再開啟timer2定時器，順序不能錯。之前把清除timer1的寫在了開啟timer2之後，整個廣告就像抽風一樣抖動，醉了
完整程式碼如下：
<!DOCTYPE html>
<html>
<head>
<style>
*{
margin: 0;
}
#box{
width: 180px;
height: 180px;
background-color: lightpink;
position: fixed;
right: 0;
bottom: -180px;
}
span{
cursor: pointer;
}
</style>
</head>
<body>
<div id="box">
<span onclick="guanbi()">關閉</span>
</div>
</body>
<script>
var box=document.getElementById("box");
//moveUp 定時器
function moveUp(){
var css=document.defaultView.getComputedStyle(box,null);
var bottom=parseInt(css.bottom);
if(bottom!=0){
bottom+=9;
box.style.bottom=bottom+"px";
}
else{
clearInterval(timer1);
timer1=null;
}
}
var timer1=null;
function dakai(){
timer1=setInterval(moveUp,100);
}
//頁面載入完成開啟
window.onload=dakai;
//moveDown 定時器
function moveDown(){
var css=document.defaultView.getComputedStyle(box,null);
var bottom=parseInt(css.bottom);
if(bottom!= -180){
bottom-=9;
box.style.bottom=bottom+"px";
}
else{
clearInterval(timer2);
timer2=null;
var timer3=null;
timer3=setTimeout(dakai,5000);
}
}
//按關閉鍵後關閉
var timer2=null;
function guanbi(){
clearInterval(timer1);
timer1=null;
timer2=setInterval(moveDown,100);}
</script>
</html>