重温js第三天：6月12+13日小结

window.onload只会加载一次，addEventListener可以重复加载
setTimeout和setIntetval定时器，它们的区别是后者会反复调用这个回调函数，调用对象是window，但是window对象一般可以省略
callback回调函数，指的就是事件完成后才执行的函数，比如添加点击事件里面有个回调函数，就是点击行为结束后才会触发，定时器也包含回调函数指的是时间到了再调用函数
注意变量的作用域问题
发送短信小案例:那个剩余多少秒的倒计时
同步和异步涉及线程问题，同步任务放在主线程的执行栈，异步任务都是通过回调函数，这类任务会放到任务队列
location对象有很多属性，最重要的就是href
属性可以拿到整个地址，也可以把location.href=地址 放到一个回调函数，比如放到一个定时器里面，就会自动跳转到指定地址
url统一资源定位符
提交表单跳转后传用户名小案例:用到split和slice之类的常用函数
location.reload重新加载
navigator对象包含浏览器的相关信息
history对象，里面包含forword和back方法
offset偏移量对象·，里面有很多属性关于得到元素的位置和大小（动态获取，因为浏览器可以缩小，那样的话偏移量会变）
padding和border会撑大盒子
offset和style的区别：style只能得到行内样式表的样式值，但是offset都可以；一个带单位一个不带；前者只读，后者可改
放大镜小案例：涉及pageX和pageY两个属性，e就是函数前面的默认对象，分为多个功能模块来做
模态框拖拽小案例：分析需求，获取元素，给按钮绑定事件；拖拽的原理就是鼠标按着移动的时候，把新的坐标给拖拽的div，鼠标坐标（e.pageX和Y）减去鼠标在盒子里面的坐标（先通过鼠标点击盒子确定算法是e.pageX-offSetLeft等）就是模态框的坐标，注意这俩最后相减并不是的offSetLeft和offSetTop，因为e.pageX和Y在鼠标点击和鼠标移动时的值是不一样的，这就是整体算法，最后要移除这个事件，要不然模态框会一直跟着跑
元素可视区client系列：也是涉及距离的对象
立即执行函数function（）{}（）最后这个小括号表示调用，前面就是个匿名函数，这个执行函数的最大作用就是独立创建了一个作用域
dpr物理像素比
元素滚动scroll事件（滚动条发生变化就会触发的事件），scroll是真正的内容的大小（宽度），
淘宝固定侧边栏小案例：本来是绝对定位，滚动条到一定位置变成固定定位，这时候就要用到scroll事件和这个事件对应的属性。Scroll一般用于侧边栏的滚动，比较重要
e.offsetWidth和clientWith和scrollWith的区别主要是第一个含边框大小，后两个不含有，然后最后一个返回的是自身的实际宽度。

动画的基本原理就是通过使盒子的left值不断发生改变，涉及到不断的变化所以要用定时器interval，一般判断条件可以后手考虑添加，先考虑移动效果，再想判断条件if应该放在哪儿，因为可能移动到一个地方就停止；offsetleft只读；各种移动都涉及到定位，因为这种效果里面涉及了left值；行内元素加了定位不转块级元素也可以设置大小；不同元素记录不同的定时器，就涉及到var timer的弊端，所以可以采用obj.timer，obj是对象形参

匀速动画就是当前位置的值加上一个固定的值走，缓速动画就是加一个变化的值
如果出现离目标位置还有一点点距离，就把步长值做个取整操作
动画函数加回调函数，函数也可以当参数传递，那样就实现了回调的过程 ，回调函数可以写在定时器结束里面，要用到mouseleave事件
网页轮播图案例：轮播图的滚动就涉及动画效果
轮播图图片可以用ul li a img来实现
先保证所有图片在同一行浮动
给window添加一个监听事件load页面全部加载完才引入js
mouseenter鼠标经过事件
mouseleave鼠标离开事件
小圆圈个数要和图片一致，有几个li就有几个图片（ul.children.length），小圆圈是放在ol里面，通过创建（createElement）li（小圆圈）然后插入(appendChild)到ol；小圆圈的底色功能，排他思想，给li添加点击事件，让所有的小圆圈li清除current类（自定义的类样式），让当前点击的li添加current类；注意轮播图是ul在动，不是li在移动；滚动距离的算法就是小圆圈索引号×图片宽度；点击的时候移动，所以还是写在上面的点击事件里面，添加之前的动画效果，这时候考虑的是怎么拿到索引号的问题，因为li没有index属性，需要用之前的for循环setattribute一下，然后在后面getattribute一下；最后的自动播放轮播图功能用定时器实现
节流阀：让事件无法连续触发，利用回调函数来锁住函数，回调函数会在动画执行完毕才会执行，一般用flag=true或者false来实现，在函数外定义为true，在函数调用（点击事件函数）前定义为f，调用完毕后（动画函数）取反，一开始肯定是true， 定义为f以后不管怎么点击都无效了，然后在动画函数里面来一个回调函数把flag取反，就是动画执行完毕后就可以继续成功点了
返回顶部小案例：滚动窗口到文档中的特定位置，用到window对象的pageYoffset属性
筋斗云小案例：只能定位的盒子才能动来动去，使用动画函数；要用到this.offsetLeft表示当前鼠标点击位置？这个属性可以稍微查一下：offsetLeft : 返回当前元素的相对水平偏移位置的偏移容器；offsetTop : 返回当前元素的相对垂直偏移位置的偏移容器；pageX ：当前指针所在的X位置；pageY ：当前指针所在的Y位置；clientX 事件属性返回当事件被触发时鼠标指针相对于浏览器页面（当前窗口）的水平坐标。
offsetLeft针对的是盒子，pageX针对的是鼠标，clientX针对的是页面变化（放大缩小）时的盒子