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

Source

啦啦啦啦,写一下最近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>