窗口右下角消息弹出框

最新推荐文章于 2023-09-22 23:18:57 发布

java_zhaoyanli

最新推荐文章于 2023-09-22 23:18:57 发布

阅读量2.7k

点赞数

分类专栏： WEB-DOM

本文链接：https://blog.csdn.net/java_zhaoyanli/article/details/50959302

版权

WEB-DOM 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

html:

<span style="font-size:18px;"><!DOCTYPE html>
<html>
 <head>
  <title>窗口右下角消息弹出框</title>
  <meta charset="utf-8"/>
  <link rel="stylesheet" href="css/4_3.css"/>
  <script src="js/5_3.js">
	
  </script>
 </head>
 <body>
  <div id="msg">
	<a οnclick="adv.moveDown()">X</a>
  </div>
 </body>
</html>
</span>

js:

<span style="font-size:18px;">/*重要*/
var adv={
	HEIGHT:0,//保存msg的高度，充当移动的总距离
	TIME:2000,//总时间
	STEPS:50,//总步数
	interval:0,//每步时间间隔
	step:0,//每步步长
	timer:null,//保存当前定时器的序号
	init:function(){
		//获得msg计算后的样式中的height，保存在HEIGHT
		this.HEIGHT=parseFloat(getComputedStyle(msg).height);
		//计算每步时间间隔：TIME/STEPS,保存在interval
		this.interval=this.TIME/this.STEPS;
		//计算每步步长：HRIGHT/STEPS，保存在step中
		this.step=this.HEIGHT/this.STEPS;
	},
	start:function(){//页面加载后启动第一次上移
		//this->adv
		this.init();//this指的是adv
		this.moveUp();
	},
	moveUp:function(){//启动上移
    //this->adv
    //启动一次性定时器,每隔interva，执行一次moveUpStep
    this.timer=setTimeout(
      this.moveUpStep.bind(this),this.interval);
  },
	moveUpStep:function(){
		//获得现在的bottom？
		var bottom=parseFloat(getComputedStyle(msg).bottom);
		bottom+=this.step;//将bottom值+step
		msg.style.bottom=bottom+"px";//将bottom值设置回msg上
		if(bottom<=0){//如果bottom<=0
			this.timer=setTimeout(//再次启动一次性定时器
				this.moveUpStep.bind(this),this.interval);
		}else{//一次性定时器中即使任务结束，也应邀清空timer
			this.timer=null;
		}
	},
		
	moveDownStep:function(){
		//获得msg现在的bottom？
		var bottom=parseFloat(getComputedStyle(msg).bottom);
		//将bottom值+step
		bottom-=this.step;
		//将bottom值设置回msg上
		msg.style.bottom=bottom+"px";
		//如果bottom>-Height
		if(bottom>=-this.HEIGHT){
			//再启动一次定时器
			this.timer=setTimeout(this.moveDownStep.bind(this),this.interval);
		}else{
		//否则
			//再次启动一次性定时器，传入moveUp，提前绑定this,设置等待时间为WAIT
			this.timer=setTimeout(this.moveUpStep.bind(this),1000);
		}
	},
	
	
	moveDown:function(){//启动上移
    //this->adv
    //启动一次性定时器,每隔interva，执行一次moveUpStep
	if(this.timer==null){
	
    this.timer=setTimeout(
      this.moveDownStep.bind(this),this.interval);
	}
  },
}

window.οnlοad=function(){
	adv.start();//this->adv
}</span>