用JS写烦人右下角的弹窗小广告

啦啦啦啦，写一下最近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">
	<span onclick="guanbi()">关闭</span>
</div>
</body>
</html>

其中，bottom为-180px，隐藏在页面下方。JS的控制升降就是控制bottom的值。

以升起为例，先写一个moveUp的函数：

var box=document.getElementById("box");
	//moveUp 定时器
	function moveUp(){
		var css=document.defaultView.getComputedStyle(box,null);
		//获取box的所有CSS样式
        var bottom=parseInt(css.bottom);
        //pasreInt()获得字符串内的Number
        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;

注意：

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>