BOM

# 1 什么是BOM

BOM(Browser Object Model) 浏览器对象模型

它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window,

由于每个浏览器厂商实现方式不同, BOM的表现会略有差异.

BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性

包括:

location: URL相关
navigator: 浏览器相关
screen: 窗口相关
history: 浏览历史

其实, BOM 比 DOM 更大, 它包含 DOM

u=1150090246,3050686777&fm=26&gp=0

# 2 常用方法

window对象提供了很多可用方法

像之前, 我们经常用到的方法都是window对象的方法

alert
prompt

这里, 我们重点介绍

定时器
location对象
history对象

# 3 定时器

window 对象提供了 2 种定时器

setTimeout()
setInterval()

# 1) setTimeout

语法

setTimeout(函数, ms时间);

当时间到了, 会执行函数. 只执行一次

示例

setTimeout(function() {
  console.log('1s')
}, 1000)

1
2
3

回调函数

像上面这样的函数, 我们一般也叫回调函数

顾名思义, 回调函数(callback)就是"现在不执行, 过一段时间回过头来执行"

回调函数都有一个触发的时机, 比如

事件处理函数: 当按钮点击时触发
定时器函数: 当时间到了触发

# 2) setInterval

语法

setInterval(函数, ms时间);

每隔一段时间, 执行一次函数. 会执行多次

示例

setInterval(function() {
  console.log('1s')
}, 1000)

1
2
3

# 3) clearInterval

通过clearInterval停止setInterval设置的定时器

示例

var counter = 3
var id = setInterval(function () {
  if (counter <= 0) {
    clearInterval(id)
    console.log('时间到了')
  } else {
    console.log('还剩' + counter + '秒')
    counter--
  }
}, 1000)

1
2
3
4
5
6
7
8
9
10

应用场景:

倒计时
发送验证码, 60s后重试
抽奖

示例 - 模拟发送验证码倒计时

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    手机号码: <input type="text" /> <button>发送</button>

    <script>
      var btn = document.querySelector('button')

      var timer = 3
      btn.addEventListener('click', function (e) {
        btn.disabled = true
        var id = setInterval(function () {
          if (timer <= 0) {
            clearInterval(id)
            btn.innerHTML = '发送'
            btn.disabled = false
            return
          }
          btn.innerHTML = timer + '秒后重试'
          timer--
        }, 1000)
      })
    </script>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

# 4 location对象

# 1) 作用

location对象用于获取设置URL

什么是URL

URL(Uniform Resource Locator), 统一资源定位符

在计算机网络中, 可以通过统一资源定位符(URL)请求对应的服务器资源(Resource)

Schema://host[:port]/path[?query-string]#anchor

Schema: 使用的协议类型, 如http/https/ftp等
host: 主机域名或IP
port: 端口号(可选)
path: 路径
query-string: 查询参数(可选)
#anchor: 锚链接

# 2) 常用属性

属性名	说明
location.href	获取或者设置 URL
location.pathname	返回路径部分
location.hash	返回#后面的锚链接

示例 - 3秒后跳转

var counter = 3
var id = setInterval(function () {
  if (counter <= 0) {
    clearInterval(id)
    console.log('时间到了')
    location.href = 'http://www.baidu.com'
  } else {
    console.log('还剩' + counter + '秒')
    counter--
  }
}, 1000)

1
2
3
4
5
6
7
8
9
10
11

# 5 history对象

# 1) 作用

history对象类似于浏览器的前进后退功能, 访问历史记录

# 2) 常用属性方法

属性方法	说明
back()	后退, 返回到上一次的访问的页面
forward()	前进
go(参数)	前进或后退, 1表示前进1个页面, -1表示后退一个页面

# 6 自学

自学navigator对象

如果觉得有帮助, 可以微信扫码, 请杰哥喝杯咖啡~

上次更新: 2021/09/03, 15:32:17

← DOM jQuery→