前端JS-Day21

2022-09-06 19:34:42 阅读：221 来源： 互联网

标签：定时器 obj 对象前端元素 Day21 JS window 系列

client系列：获得可视区域的相关信息

clientWidth和offsetWidth区别：clientWidth只包含内容和padding，offsetWidth包含内容和内外边框。

立即执行函数：无需调用，直接执行。且独立创建了一个作用域。

(function() {})()； (function(){}())；两种写法 像素比：即devicePixelRatio值。 pageshow事件：重新加载页面触发的事件。 pageshow和load区别：往返缓存的存在

scroll系列：获取动态变化的元素属性

scrollWidth相较于offset和client仅返回自身宽度。

scrollTop属性：

window.pageXOffset和window.pageYOffset为整个页面被卷曲的距离。

三大系列总结：

offset系列：用于获取元素位置，offsetLeft和offsetTop。

client系列：用于获取元素大小，clientWidth和clientHeight。

scroll系列：用于获取滚动距离，scrollTop和scrollLeft。

页面滚动距离获取：window.pageXOffset和window.pageYOffset。

mouseover和mouseenter区别：mouseover经过自身和子元素都会触发事件，mouseenter仅经过自身会触发事件。所以mouseenter不会触发冒泡。

JS动画：目标对象是绝对定位

对动画函数进行封装后，不同对象对函数进行调用会造成不同对象使用相同定时器造成浪费，故采用分别设置定时器方法。

利用js动态语言的特点，给对象设置属性的特点，给对象设置定时器；

 // 封装函数,obj目标对象,target目标位置,sec定时时长,len单位时间位移距离
        function animations(obj, target, sec, len) {
            clearInterval(obj.timer); 
            // 防止函数多次进行,保证对象仅有一个定时器.
            obj.timer = setInterval(()=> {
                // 利用给对象设置属性的方式,给对象设置定时器.
                if(div.offsetLeft >= target) {
                    clearInterval(obj.timer);
                }
                obj.style.left = obj.offsetLeft + len + 'px';
            }, sec);
        }

缓动动画：令元素运动速度有所变化，常见例如令元素慢慢停下。

标签：定时器,obj,对象,前端,元素,Day21,JS,window,系列
来源： https://www.cnblogs.com/LWHCoding/p/16661639.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

前端JS-Day21