BOM概述

# BOM概述

浏览器对象模型内容与浏览器窗口进行交互的对象核心是window

# BOM构成

document、location、navigation、screen、history

# window对象常见事件

窗口加载事件
window.onload = function(){} 传统方式只能用一次
window.addEventListener('load',function(){}) 新方式没有限制次数页面内容全部加载完
document.addEventListener('DOMContentLoaded',function () {}) 仅DOM加载完
调整窗口大小事件
完成响应式布局 window.innerWidth当前屏幕宽度
window.onresize = function(){}
window.addEventLister('onresize',function(){})
定时器
window.setTimeout(调用函数，延迟毫秒数) 延迟时间到了，就调用函数，值调用一次
window.setInterval(回调函数，间隔毫秒数) 反复调用一个函数，每隔这个时间，就调用函数

function callback() {
  console.log('xxx')
}
setTimeout(callback, 3000)

1
2
3
4

普通函数按代码顺序直接调用

回调函数需要等待时间，时间到了才调用这个函数（事情干完再回头调用这个函数）

停止定时器 window.clearTimeout(timeoutID)

// 案例：倒计时
let hour = document.querySelector('.hour')
let minute = document.querySelector('.minute')
let second = document.querySelector('.second')
let inputTime = +new Date('2019-5-1 18:0:0') // 用户输入的时间的毫秒数
countDown()// 先调用一次函数 防止第一次刷新页面有空白
// 开启定时器
setInterval(countDown, 1000)

function countDown(time) {
  let nowTime = +new Date() // 当前时间总毫秒数
  let times = (input - nowTime) / 1000 // times是剩余时间总描述
  let h = parseInt(times / 60 / 60 % 24) // 时
  h = h < 10 ? '0' + h : h
  hour.innerHTML = h
  let m = parseInt(times / 60 / 60)
  m = m < 10 ? '0' + m : m
  minute.innerHTML = m
  let s = parseInt(times % 60)
  s = s < 10 ? '0' + s : s
  second.innerHTML = s
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

// 停止定时器
// window.clearInterval(intervalId)
let start = document.querySelector('.start')
let stop = document.querySelector('.stop')
let timer = null
start.addEventListener('click', function () {
  timer = setInterval(function () {
    console.log()
  }, 1000)
})
stop.addEventListener('click', function () {
  clearInterval(timer)
})

1
2
3
4
5
6
7
8
9
10
11
12
13

// 案例：发送短信
let btn = document.querySelector('button')
let time = 10
btn.addEventListener('click', function () {
  btn.disabled = true
  let timer = setInterval(function () {
    if (time === 0) {
      clearInterval(timer)
      btn.disabled = false
      btn.innerHTML = '发送'
      time = 3
    } else {
      btn.innerHTML = '还剩下' + time + '秒'
      time--
    }
  }, 1000)
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

上次更新: 2024/08/14, 04:14:33

← JavaScript-页面跳转 this指向→