案例总结【原生js实现烦人的广告弹框】

作者 : 开心源码 本文共881个字,预计阅读时间需要3分钟 发布时间: 2022-05-13 共132人阅读

仿写了一个简单的广告弹窗,主要功能就是页面加载完毕时,右下角广告弹出来,点了×,过一会又自己弹出来,样式如下

image

完整代码放在GitHub仓库: HiJackLi/demo/

一、要点记录

1.弹框运动需要几个可供客户配置的参数:运动距离(盒子高度决定)、运动时间、运动速度(运动步数决定)、等待重复出现时间
2.通过定时器setTimeout来进行每一帧的运动,并需要一个帧数记录器来记录弹框运动了几次

3.当帧数记录的数<运动总步数时,重复进行上面的运动,也就涉及递归了。

4.页面初始化时运动是向上运动,点击×是向下运动,等待一会出现是向上运动,所以有两种运动函数,一个向上,一个向下。

5.每次运动结束要清理定时器,并且置为null,帧数记录器也要归零

6.点击×需要上锁,避免重复点击。可以通过定时器返回值timer==null来判断能否进行下一步运动

二、反思问题

1.在获取弹框的高度时用Element.style.height的方法是一大错误,由于这种方法获取不到外部样式,最后通过网上查找理解到了一个方法getComputedStyle(),这个能够获取完整的元素样式表,唯一不足就是对属性只读不能写,重新赋值操作还得Element.style

2.获取元素的定位bottom时不记得使用parseFloat方法去掉单位
3.中间一直出问题,因为使用对象编程的方式,在定时器和递归中的this指向问题上被搞晕了。由于我用var self = this的方法来处理this指向问题,最后发现根本不行,因为递归很屡次,这种方法只能处理一层。后面使用了bind才处理了,并且上网查了一下call和apply也不行,由于call和apply会立即执行运动函数,不会等待定时器的计时,所以递归会进行,但是并没有运动的迹象。而bind是返回一个新的函数等待被执行。
4.加锁思想一直思维定势,总是想公告一个变量来给个布尔值进行加锁,其实可以根据情况判断,比方这种案例可以用定时器的返回值能否为null来判断,由于每次运动结束都要置为null,假如是在运动,那么点击就不会重复增加事件。

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 案例总结【原生js实现烦人的广告弹框】

发表回复