BOM的概念

•BOM(BrowserObjectModel)是指浏览器对象模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。
•我们在浏览器中的一些操作都可以使用BOM的方式进行编程处理，比如：刷新浏览器、后退、前进、在浏览器中输入URL等。

Window 对象

  1. window 是浏览器的顶级对象，当调用 window 下的属性和方法时，可省略 window

  2. 注意：window 下的两个特殊属性 window.name/window.top;

    加载事件

    onload 事件

  3. window 对象或者 BOM-浏览器对象模型 - 图1 等元素添加 onload 加载事件，表示只有绑定事件的元素加载完才能触发事件，才能执行事件函数。

  4. 其中 window 对象加载完毕：指的是所有HTML结构加载完，并且外部引入（js，css，img，视频） 也加载完毕；


应用

  • 利用 window.onload 事件，可以将js代码提前到html结构之前。
  • 注意：一个也面中只能有一个 window.onload 事件。

    延时器

  1. 语法：window.setTimeout(function,time)
  2. 第一参数：延时执行的函数，可以是匿名函数定义，或者是一个函数名的引用，注意不要加（）；
  3. 第二个参数：延时的时间，以毫秒计数，1000毫秒等于1秒。
  4. 功能：在指定的时间后，延迟执行一个函数。

    清除延时器

    •window对象的一个方法
    •语法：window.clearTimeout(timeout);
    •参数：指定的延时器变量名引用。
    •功能：清除指定的延时器。
    •注意：清除的延时器需要存储到一个变量中，便于后期清除调用。

定时器

•window对象的一个方法
语法：window.setInterval(function,interval);
•第一个参数：每次执行的函数，可以是匿名函数定义，或者是一个函数名的引用，注意不要加()。
•第二个参数：时间间隔，以毫秒计数，1000毫秒等于1秒。
•功能：每隔一个指定的时间，周期性的执行一个函数。

清除定时器

window对象的一个方法
•语法：window.clearInterval(timer);
•参数：指定的定时器变量名引用。
•功能：清除指定的定时器。
•注意：清除的定时器需要存储到一个变量中，便于后期清除调用。

简单运动

原理

•简单运动：是一种视觉暂留效果，只要元素变化过程时间够短，给人眼造成的效果就是一个运动的效果，人眼的视觉残留的时间0.1-0.4秒之间。
•制作方法：通过定时器，实现每隔一个极短的时间（50-100毫秒左右），执行函数，函数内部让运动的属性值发生变化。

提高运动速度的方法

•1、缩短时间间隔，增加了每秒移动的次数。•2、加大步长，让每一次走的步长增加。
1、缩短时间间隔，增加了每秒移动的次数。
2、加大步长，让每一次走的步长增加。

清除定时器的问题

问题一

将定时器的开始和停止过程书写在不同的事件函数内部，容易出现用户错误点击情况
1、多次点击开始，会造成加速
2、多次点击开始，不能够再停止

解决方法

设表先关
每次开启新定时器之前，都清除一次前面的定时器。

问题二

需求：要求元素走到指定位置停止，例如让元素停止在500px的位置.
问题：如果步长设置的不合理，停止的位置可能不是正好在500处

解决方法

•拉终停表
•在定时器内部每次都要判断是否走到了终点，要不要停止定时器
•如果走到或超过了终点，强行拉到终点，并停止定时器

封装动画函数

单一动画和多属性动画

页面特效

简单无缝运动

  1. <script>
  2.         var scroll=document.getElementById('scroll');
  3.         var munit=document.getElementById('munit');
  4.         var oLi=munit.children;
  5.         // 存储li 最大偏移量；
  6.         var maxLeft=-1470;
  7.         var newLeft=0;
  8.         var timer;
  9.         timer=setInterval(function(){
  10.             newLeft-=15;
  11.             if(newLeft<=maxLeft){
  12.                 newLeft=0;
  13.             }
  14.             munit.style.left=newLeft+'px';
  15.         },100)
  16.         munit.onmouseover=function(){
  17.             clearInterval(timer);
  18.         }
  19.         munit.onmouseout=function(){
  20.             timer=setInterval(function(){
  21.                 newLeft-=15;
  22.                 if(newLeft<=maxLeft){
  23.                     newLeft=0;
  24.                 }
  25.                 munit.style.left=newLeft+'px';
  26.             },100)
  27.         }
  28.     </script>

高级无缝运动

  1. <script>
  2.         var scroll=document.getElementById('scroll');
  3.         var munit=document.getElementById('munit');
  4.         var oLi=munit.children;
  5.         // 存储li 最大偏移量；
  6.         var maxLeft=-munit.offsetWidth;
  7.         munit.innerHTML=munit.innerHTML+munit.innerHTML;
  8.         var newLeft=0;
  9.         var timer;
  10.         timer=setInterval(function(){
  11.             newLeft-=15;
  12.             if(newLeft<=maxLeft){
  13.                 newLeft=0;
  14.             }
  15.             munit.style.left=newLeft+'px';
  16.         },100)
  17.         munit.onmouseover=function(){
  18.             clearInterval(timer);
  19.         }
  20.         munit.onmouseout=function(){
  21.             timer=setInterval(function(){
  22.                 newLeft-=15;
  23.                 if(newLeft<=maxLeft){
  24.                     newLeft=0;
  25.                 }
  26.                 munit.style.left=newLeft+'px';
  27.             },100)
  28.         }
  29.     </script>


location 对象

•location对象是window对象下的一个属性，使用的时候可以省略window对象
•location可以获取或者设置浏览器地址栏的URL

location 对象的成员

•使用chrome的控制台查看
•查MDN：https://developer.mozilla.org/zh-CN/
•成员：
•assign()/reload()/replace()
•hash/host/hostname/search/href…..

URL

统一资源定位符(UniformResourceLocator,URL)
•URL的组成：scheme://host:port/path?query#fragment
•例如：http://www.lagou.com:80/a/b/index.html?name=zs&age=18#bottom
•scheme:通信协议，常用的http,ftp,maito等
•host:主机，服务器(计算机)域名系统(DNS)主机名或IP地址。
•port:端口号，整数，可选，省略时使用方案的默认端口，如http的默认端口为80。
•path:路径，由零或多个’/‘符号隔开的字符串，一般用来表示主机上的一个目录或文件地址。
•query:查询，可选，用于给动态网页传递参数，可有多个参数，用’&’符号隔开，每个参数的名和值用’=’符号隔开。例如：name=zs
•fragment:信息片断，字符串，锚点.

history 对象

•history对象是window对象下的一个属性，使用的时候可以省略window对象
•history对象可以与浏览器历史记录进行交互，浏览器历史记录是对用户所访问的页面按时间顺序进行的记录和保存。
•back()•forward()•go()