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

最新推荐文章于 2022-08-23 17:24:33 发布

水搁浅了小鱼

最新推荐文章于 2022-08-23 17:24:33 发布

阅读量2.8k

点赞数 4

分类专栏： Javascript 文章标签： js javascript 定时器弹窗广告

本文链接：https://blog.csdn.net/weixin_44214142/article/details/85765100

版权

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