前端学习-BOM

BOM

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

window 对象

window 是浏览器的顶级对象，当调用 window 下的属性和方法时，可以省略 window。
注意:window下两个特殊的属性 window.name、window.top。

加载事件

onload 事件 我们可以给 window 对象或者 等元素添加 onload 加载事件，表示只有绑定事件的元素加载完毕才能触发事件，才能执行事件函数。
其中 window 对象加载完毕:指的是所有HTML结构加载完，并且外部引入资源(js、css、img、 视频)也加载完毕。

延时器

延时器是 window 对象的一个方法，类似于定时炸弹
语法:window.setTimeout(func,time);
第一个参数:延时执行的函数，可以是匿名函数定义，或者是一个函数名的引用，注意不要加 () 。
第二个参数:延时的时间，以毫秒计数，1000 毫秒等于 1 秒。
功能:在指定的时间后，延迟执行一个函数。

清除延时器

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

<script>
    // 延时器
    // 异步语句
    // 延时器为了保证后期能够被清除，需要定义赋值给一个变量
    var timeout = window.setTimeout(function () {
      console.log("boom");
    },2000);
    // 同步语句
    console.log(1);
    console.log(2);
    console.log(3);
    console.log(4);

    // 清除延时器
    window.clearTimeout(timeout);
</script>

定时器

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

清除定时器

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

<script>
    var i = 1;
    // 定时器也是异步语句
    // 开启定时器：每隔 0.5 秒输出一次 i，并且让 i 每次自加
    // 程序执行到定时器代码部分就相当于开启了一个定时器，不需要进行其他的打开操作
    // 第一次执行函数时是在第一个时间间隔之后
    // window.setInterval(function () {
    //   console.log(i++);
    // },500);

    // 要想清除定时器，在定义的时候必须存到一个变量中
    var timer = setInterval(function () {
      console.log(i++);
    },500);
    // 清除定时器
    window.clearInterval(timer);
</script>

清除定时器的问题

问题 1

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

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

<script>
    // 简单运动
    // 获取元素
    var start = document.getElementById("start");
    var end = document.getElementById("end");
    var box = document.getElementById("box");
    // 信号量
    var nowLeft = 0;
    // 全局定义一个变量存储定时器
    var timer;
    // 定时器
    // 定时器写在事件函数内部，会由于事件多次被触发，导致定时器累积
    // 解决方法：设表先关，每次重新开启一个定时器之前都先关闭一下之前的定时器
    start.onclick = function () {
      // 先清除定时器
      clearInterval(timer);
      timer = setInterval(function () {
        // 信号量进行自加
        nowLeft += 5;
        // 将最新的 nowLeft 的值赋值给元素的 css 属性
        box.style.left = nowLeft + "px";
      },100);
    };
    // 清除定时器
    end.onclick = function () {
      clearInterval(timer);
    };
</script>

问题 2

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

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

<input type="button" value="开始" id="start">
<div class="box" id="box"></div>
<script>
    // 简单运动
    // 获取元素
    var start = document.getElementById("start");
    var box = document.getElementById("box");
    // 信号量
    var nowLeft = 0;
    // 全局定义一个变量存储定时器
    var timer;
    // 定时器
    start.onclick = function () {
      // 先清除定时器
      clearInterval(timer);
      timer = setInterval(function () {
        // 信号量进行自加
        nowLeft += 37;
        // 判断这一次的运动是否走到了500 的位置
        // 拉终停表，走到规定的终点位置
        if (nowLeft >= 500) {
          // 将变量的值强制赋值为 500
          nowLeft = 500;
          // 清除定时器
          clearInterval(timer);
        }
        // 将最新的 nowLeft 的值赋值给元素的 css 属性
        box.style.left = nowLeft + "px";
      },50);
    };
</script>

问题 3

需求:在规定时间内让元素走到规定的结束位置，时间间隔可以更改
例如:让元素在 2 秒钟内，left 属性从 0 走到 500px.

解决方法
步标整除
总距离 = 步长 * 次数;
时间间隔自定义，总时长固定
求出总次数 = 总时间 / 时间间隔
定义计数器变量，每执行一次定时器函数增加计数 1，直到执行达到总次数，停止定时器

<input type="button" value="开始" id="start">
<div class="box" id="box"></div>
<script>
    // 简单运动
    // 获取元素
    var start = document.getElementById("start");
    var box = document.getElementById("box");
    
    // 已知 开始位置、结束位置、总时长、时间间隔
    // 总距离 = 步长 * 总次数
    // 总距离 = 结束位置 - 起始位置  ，已知可以求出来
    // 总次数 = 总时长 / 时间间隔 ，已知可以求出来
    // 步长 = （结束位置 - 起始位置） / （总时长 / 时间间隔）
    // 信号量 ,也相当于初始值
    var nowLeft = 200;
    // 结束位置
    var endLeft = 500;
    // 总时长
    var time = 1000;
    // 时间间隔
    var interval = 50;
    // 运算总次数
    var maxcount = time / interval;
    // 运算出每一次的步长
    var step = (endLeft - nowLeft) / maxcount;
    // console.log(step);
    // 定义一个次数的累加器
    var count = 0;
    // 准备条件结束可以开始定时器了
    var timer;
    start.onclick = function () {
      timer = setInterval(function () {
        // 让元素的属性每一次变化一个步长
        nowLeft += step;
        // 每运动一次让次数累加器加 1
        count++;
        // 停止定时器
        if (count >= maxcount) {
          // 拉终停表
          nowLeft = endLeft;
          clearInterval(timer);
        }
        // 给属性赋值
        box.style.left = nowLeft + "px";
      },interval);
    };
</script>

location 对象

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

URL

统一资源定位符 (Uniform Resource Locator, URL)
URL的组成:scheme://host:port/path?query#fragment
例如:http://www.baidu.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:信息片断，字符串，锚点.

<input type="button" value="跳转" id="btn">
<script>
    var btn = document.getElementById("btn");
    btn.onclick = function () {
      // 输出URL地址
      console.log(location.href);
      // 重新赋值，可以跳转到新页面，并且记录历史
      location.href = "http://www.baidu.com";

      // assign 委派
      // assign() 方法的作用 与 href 属性一样，可以设置页面跳转的地址
      location.assign("http://www.baidu.com");

      // replace 替换
      // 功能：替换掉地址栏中当前的网址，但是不记录历史
      location.replace("http://www.baidu.com");

      // reload 重新加载
      // 类似 键盘中 f5 功能,类似于false效果， ctrl+f5 强制刷新，从服务器获取页面，相当于 true 的效果
      // 参数：true 强制从服务器获取页面，false 如果浏览器有缓存网页的话，会直接从缓存中获取页面
      location.reload(true);
    };
</script>

history 对象

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

// 前进，查看之前记录的跳转后的页面
// history.forward();
history.go(1);

// 回退历史记录访问
// history.back();
history.go(-1);