BOM对象 概述 相关操作 DOM的概念 元素的获取 属性操作

获取时间差
1. 获取 时间节点A 到 格林威治的毫秒数
2. 获取 时间节点B 到 格林威治的毫秒数
3. 两个时间节点的毫秒数相减, 得到两个时间节点之间相差的毫秒数
因为相减的时候, 我不确定谁大谁小
所以我最好是随便减一个, 取绝对值
4. 通过相差的毫秒数换算出是 多少天多少小时多少分钟多少秒
4-1. 换算天数
总的秒数 / 一天的秒数 得到的就是 多少天(小数)
我们只需要整天数, 不够整天的按照小时算
Math.floor() 取整一下
4-2. 换算小时
总的秒数 % 一天的秒数 剩下的就是不够一天的秒数
用剩下的秒数 / 一小时的秒数 得到的就是 多少小时(小数)
我门只需要整小时数, 不够一个小时的按照分钟取计算
Math.floor() 取整一下
4-3. 换算分钟
总的秒数 % 一小时的秒数 剩下的就是不够一小时的秒数
用剩下的秒数 / 一分钟的秒数 得到的就是多少分钟(小数)
我们只需要整分钟数, 不够一分钟的按照秒钟计算
Math.floor() 取整一下
4-4. 换算秒钟
总的秒数 % 一分钟的秒数 剩下的就是不够一分钟的秒数
// 0. 准备两个时间节点
// 2020 年 5 月 22 号 16 点 50 分 32 秒
var time1 = new Date(‘2020-5-22 16:50:32’)
// 当前的时间节点
var time2 = new Date()
// 计算从现在到明天晚上下课还有多少时间
// 1. 获取 time1 的时间戳
var t1 = time1.getTime()
// 2. 获取 time2 的时间戳
var t2 = time2.getTime()
// 3. 获取两个毫秒数之间的差值(直接计算到秒)
var diff = Math.floor(Math.abs(t1 - t2) / 1000)
// 4. 通过 diff 换算
// 4-1. 换算天
var day = Math.floor( diff / (60 * 60 * 24) )
// 4-2. 换算小时
var hours = Math.floor( diff % (60 * 60 * 24) / (60 * 60) )
// 4-3. 换算分钟
var minutes = Math.floor( diff % (60 * 60) / 60 )
// 4-4. 换算秒钟
var seconds = diff % 60
console.log(day, hours, minutes, seconds)
封装一个计算时间差的函数
1. 准备一个函数, 接收两个参数, 就是两个时间节点
2. 计算两个时间节点之间相差的 天数 小时数 分钟数 秒数
我们计算时间差的思路
2-1. 计算出两个时间节点之间相差的秒数
3. 把计算结果返回
因为我要返回四个数据
我们的一个 return 只能返回一个数据
两种:
放到数组里面 [1, 6, 58, 56]
可以实现效果, 但是对于每一个数据没有指向性的说明
放到对象里面 { day: 1, hours: 6, minutes: 58, seconds: 56 }
可以实现效果, 并且对于每一个数据都有明确的指向性
// 1. 准备一个计算两个时间之间时间差的函数
function timeDiff(time1, time2) {
// 两个参数表示两个时间节点
// 2. 计算两个时间节点之间的差值(天, 小时, 分钟, 秒钟)
// 2-1. 计算两个时间节点之间相差的秒数
var diff = Math.floor(Math.abs(time1.getTime() - time2.getTime()) / 1000)
// 2-2. 通过 diff 换算两个时间节点之间相差的天, 小时, 分钟, 秒钟
var day = Math.floor( diff / (60 * 60 * 24) )
var hours = Math.floor( diff % (60 * 60 * 24) / (60 * 60) )
var minutes = Math.floor( diff % (60 * 60) / 60 )
var seconds = diff % 60
// 3. 返回一个对象, 里面包含所有信息
// 3-1. 创建一个对象
var obj = {}
// 3-2. 向对象里面添加成员
obj.day = day // 把 day 变量的值赋值给了 obj 的 day 成员
obj.hours = hours
obj.minutes = minutes
obj.seconds = seconds
// 3-3. 把这个对象返回
return obj
}
// 使用 timeDiff 函数计算两个时间节点之间的时间差
var time1 = new Date(‘2020-5-22 16:50:33’)
var time2 = new Date()
var res = timeDiff(time1, time2)
console.log(‘距离出去浪还有 ’ + res.day + ’ 天 ’ + res.hours + ’ 小时 ’ + res.minutes + ’ 分钟 ’ + res.seconds + ’ 秒!^_’)
// 时间是没有样式的
// 当你把这个数字渲染到页面的 span 标签里面
// 给 spen 标签一个样式
BOM(Browser Object Model) 浏览器对象模型
就是一套操作浏览器的属性和方法
BOM 的核心就是 window(窗口)
我们所有和 BOM 相关的属性和方法都是 window.xxx
window.xxx 可以省略 window. 不写
window 就是 js 里面的全局
我一个页面里面所有的内容都包含在全局内
// 定义了一个全局变量 a 值是 100
var a = 100
console.log(window)
获取浏览器窗口尺寸
在 window 下有两个属性, 表示的是浏览器 可视窗口 的大小
1. window.innerWidth
获取的是浏览器可视窗口的宽度(包含滚动条位置)
2. window.innerHeight
获取的是浏览器可视窗口的高度(包含滚动条位置)
特别说明:
mac 的 safari 浏览器, 滚动条是隐形的
innerWidth 和 innerHeight 就是不包含滚动条的尺寸
console.log(‘浏览器的可视窗口宽度 : ’ + window.innerWidth)
console.log(‘浏览器的可视窗口高度 : ’ + window.innerHeight)
浏览器的弹出层
1. window.alert() 提示框
弹出一个提示框, 只有一个确定按钮
没有返回值
小括号里面就是提示用户的文本内容
2. window.confirm() 询问框
弹出一个询问框, 有确定和取消两个按钮
返回值是一个 布尔值
如果用户点击的是确定, 返回的是 true
如果用户点击的是取消, 返回的是 false
3. window.prompt() 输入框
弹出一个输入框, 有确定和取消两个按钮, 还有一个输入的文本框
返回值: 用户输入的内容
如果用户点击取消, 那么返回 null
如果用户点击确定, 那么返回的就是文本框里面的内容
如果写了内容, 就是写的内容
如果没写内容, 就是空字符串(’’)
三个弹出层的共同特点
当他们弹出来以后, 后面的所有 js 代码都先暂停
知道用户操作为止
会打断代码的继续执行
// 1. 提示框
var res = window.alert(‘hello world’)
console.log(res)
// 2. 询问框
// var res = window.confirm(‘你是不是爱我!’)
// console.log(res)
// 3. 输入框
// var res = window.prompt(‘请输入一段文本’)
// console.log(res)
console.log(‘后续代码’)
浏览器的地址信息
再 window 下有一个成员叫做 location
是一个对象, 里面保存着一些地址栏相关的属性和方法
1. window.location.href 属性
是一个读写的属性
读: 获取当前页面的地址栏信息(中文会默认以编码的形式显示)
写: 设置当前页面的地址栏, 也就是跳转页面(本页面跳转)
window.location.href = ‘你要跳转的地址’
2. window.location.reload() 方法
是一个方法
作用: 重新加载当前页面(刷新)
语法: window.location.reload()
这个代码一旦执行, 就会刷新当前页面
注意: 这个代码千万不能写在一个打开页面就能执行的位置
可以把他写在事件里面, 在你需要的时候执行
// 1. 获取当前地址栏的信息
// var href = window.location.href
// // file:///E:/NZ-2006/DAY09/03_%E4%BB%A3%E7%A0%81/06_%E6%B5%8F%E8%A7%88%E5%99%A8%E7%9A%84%E5%9C%B0%E5%9D%80%E4%BF%A1%E6%81%AF.html
// console.log('当前地址 : ’ + href)
// 2. 设置当前地址栏地址
// 下面代码一旦执行, 就会跳转到百度首页
// 为了方便看到效果, 加再点击事件里面
// window.location.href = ‘https://www.baidu.com’
// 当我点击 button 按钮的时候会跳转到百度首页
// btn.onclick = handler
// function handler() {
// window.location.href = ‘https://www.baidu.com’
// }
// reload()
// 打开页面就会执行这段代码, 就会重新加载页面
// window.location.reload()
// 把重新加载这个事情放在一个事件里面
// 每次点击按钮的时候就会重新加载页面
btn2.onclick = function () {
window.location.reload()
}
浏览器的历史记录
再 window 下有一个成员叫做 history
里面记录了操作历史记录的属性和方法
1. window.history.back()
返回上一层历史记录
前提: 你要从某一个页面跳转过来
等价于我们浏览器上面的回退按钮
2. window.history.forward()
前进到下一层历史记录
前提: 你要从某一个页面回退回来才有
等价于我们浏览器上面的前进按钮
3. window.history.go()
可以前进, 可以后退, 可以刷新
需要一个参数, 是一个数字
window.history.go(数字)
正整数: 前进
零: 刷新当前页面
负整数: 后退
// 依托再事件里面执行 go(0)
btn.onclick = function () {
// 刷新当前页面
window.history.go(0)
}
浏览器的版本信息(了解)
再 window 下有一个成员叫做 navigator
他里面保存的都是浏览器的版本以及型号的相关信息
1. window.navigator.userAgent 属性
保存的是浏览器的型号及版本信息
2. window.navigator.appVersion 属性
保存的是浏览器的版本信息
3. window.navigator.appName 属性
所有的浏览器都是统一的名称(IE低版本除外)
保存的是 Netscape 这个名字(网景)
4. window.navigator.platform 属性
保存的是该浏览器安装的操作系统
// 1. userAgent
var userAgent = window.navigator.userAgent
console.log(userAgent)
// 2. appVersion
var version = window.navigator.appVersion
console.log(version)
// 3. appName
var name = window.navigator.appName
console.log(name)
// 4. platform
var platform = window.navigator.platform
console.log(platform)
开启一个新的标签页
关闭当前标签页
浏览器标签页操作
开启一个新的标签页, 关闭当前标签页
1. window.open()
作用: 再当前浏览器开启一个新的标签页
语法: window.open(你要再新标签页显示的地址)
2. window.close()
作用: 关闭当前标签页
语法: window.close()
// open()
btn.onclick = function () {
window.open(‘https://www.baidu.com’)
}
// close()
btn2.onclick = function () {
window.close()
}
浏览器的常见事件
由浏览器的行为来触发的事件
1. window.onload 事件
会在浏览器所有资源加载完毕后触发
所有资源(标签, css, js, 图片, 视频, 音频, …)
2. window.onresize 事件
会在浏览器窗口尺寸改变的时候触发
3. window.onscroll 事件
会在浏览器的滚动条滚动的时候触发
// 这个函数会在当前页面所有资源加载完毕后触发
// window.onload = function () {
// // 当这里的代码执行的时候, 页面所有的资源加载完毕了
// console.log(‘所有资源加载完毕’)
// }
// 这个函数会在当前页面窗口尺寸改变的时候触发
// window.onresize = function () {
// // 当这里的代码执行的时候, 浏览器窗口尺寸一定改变了
// // 改变多少不一定, 只要变就触发
// // console.log(‘窗口尺寸改变了’)
// // 随着窗口尺寸的改变, 每次获取当前的窗口尺寸, 打印再控制台
// console.log('浏览器的可视窗口宽度 : ’ + window.innerWidth)
// console.log('浏览器的可视窗口高度 : ’ + window.innerHeight)
// }
// 这个函数会在当前页面的滚动条滚动的时候触发
window.onscroll = function () {
// 当这里的代码执行的时候, 表示浏览器的滚动条移动了
// 方向不管, 滚动多少也不管, 只要动就触发
console.log(‘滚动条滚动了’)
}
浏览器卷去的尺寸
document: 文档
documentElement: 表示的时 html 标签
body: 表示的时 body 标签
scroll: 滚动
top: 上
浏览器卷去的高度
1. document.documentElement.scrollTop 属性
=> 文档 的 html 元素 的 上方滚动距离
=> 有 DOCTYPE 标签的时候能拿到值
2. document.body.scrollTop 属性
=> 文档 的 body 元素 的 上方滚动距离
=> 没有 DOCTYPE 标签的时候能拿到值
有一个兼容写法
document.documentElement.scrollTop || document.body.scrollTop
浏览器卷去的宽度
1. document.documentElement.scrollLeft 属性
=> 有 DOCTYPE 标签的时候能拿到值
2. document.body.scrollLeft 属性
=> 没有 DOCTYPE 标签的时候能拿到值
有一个兼容的写法
document.documentElement.scrollLeft || document.body.scrollLeft
// 浏览器卷去的宽度
// 再浏览器滚动的事件里面获取
window.onscroll = function () {
// 有 DOCTYPE 标签的时候使用这个
// var leftD = document.documentElement.scrollLeft
// console.log(leftD)
// 没有 DOCTYPE 标签的时候使用这个
// var leftD = document.body.scrollLeft
// console.log(leftD)
// 兼容写法
// if (document.documentElement.scrollLeft) {
// var leftD = document.documentElement.scrollLeft
// } else {
// var leftD = document.body.scrollLeft
// }
var leftD = document.documentElement.scrollLeft || document.body.scrollLeft
console.log(leftD)
}
// 浏览器卷去的高度
// 不再页面打开就能执行的位置书写
// 因为只能执行一回
// var topD = document.documentElement.scrollTop
// console.log(topD)
// 需要再浏览器滚动事件里面执行
// 随着浏览器的滚动, 随时获取卷去的高度
// window.onscroll = function () {
// // 由 DOCTYPE 标签的时候, 使用这个
// // var topD = document.documentElement.scrollTop
// // console.log(topD)
// // 没有 DOCTYPE 标签的时候, 使用这个
// // var topD = document.body.scrollTop
// // console.log(topD)
// // 兼容的写法
// var topD = document.documentElement.scrollTop || document.body.scrollTop
// console.log(topD)
// }
* {
margin: 0;
padding: 0;
}
body {
width: 2000px;
height: 2000px;
}
div {
width: 100%;
height: 80px;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
background-color: skyblue;
font-size: 40px;
position: fixed;
top: -80px;
left: 0;
transition: top .5s linear;
}
小案例 - 顶部通栏显示隐藏
思路:
有一个 div 盒子
1. 给浏览器绑定一个滚动事件
我们要在滚动事件里面去获取卷去的高度
2. 随时获取卷去的高度
3. 判断卷去的高度(你自己定义个数字, 暂定 300)
卷去的高度超过 300, div 显示, display: flex;
卷去的高度不到 300, div 隐藏, display: none;
技术问题: 怎么操作元素的样式
元素.style.display = ‘none’ 就是把元素的 display 样式设置为 none
元素.style.display = ‘flex’ 就是把元素的 display 样式设置为 flex
// 1. 给浏览器绑定一个滚动事件
// 函数会随着浏览器的滚动而触发
window.onscroll = function () {
// 2. 获取卷去的高度
var topD = document.documentElement.scrollTop || document.body.scrollTop
console.log(topD)
// 3. 判断 topD 是不是大于 300
if (topD > 300) {
// div 该显示了
topNav.style.top = ‘0’
} else {
// div 该隐藏了
topNav.style.top = ‘-80px’
}
}

• {
  margin: 0;
  padding: 0;
  }
  body {
  width: 2000px;
  height: 2000px;
  }
  button {
  width: 50px;
  height: 50px;
  background-color: skyblue;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  position: fixed;
  right: 30px;
  bottom: 50px;
  }
  ^
  浏览器滚动到
  通过一个方法, 指定浏览器的卷去的高度和宽度
  1. window.scrollTo()
     作用: 设置浏览器卷去的位置
     语法:
     1. window.scrollTo(左侧的距离, 上侧的距离)
        必须写两个参数, 写一个就报错
        不需要单位, 直接是数字就行
        瞬间到达指定位置
     2. window.scrollTo({
        top: 数字, // 表示上方的距离
        left: 数字, // 表示左侧的距离
        behavior: ‘istant’, // 默认, istant(瞬间), 可以写 smooth(平滑)
        })
        behavior: 行为, 行为模式
        istant: 瞬间
        smooth: 平滑
        // 依托再事件里面执行
        goTop.onclick = function () {
        // 点击回到顶部按钮的时候触发
        // 点击的时候, 左边回到 0, 上边回到 0
        // window.scrollTo(100, 50)
        // 方法二:
        window.scrollTo({
        left: 200,
        top: 100,
        behavior: ‘smooth’, // 表示平滑的滚动
        })
        }
        定时器
  2. setTimeout(): 延时定时器 / 炸弹定时器
     作用: 再你指定时间以后, 执行一次就没有后续了
     语法: setTimeout(函数, 时间)
     函数: 会在时间达到的时候执行
     时间: 是一个数字, 单位是毫秒ms
  3. setInterval(): 间隔定时器
     作用: 每间隔指定时间以后, 执行一次代码, 循环往复没有尽头
     语法: setInterval(函数, 时间)
     函数: 每间隔指定时间就执行一回
     时间: 是一个数字, 单位是毫秒ms
     // 页面打开的时候给你打印一个时间
     console.log(new Date())
     // 1. setTimeout()
     // setTimeout(function () {
     // // 这个函数会在 2000ms 以后执行
     // console.log(‘我执行了’)
     // console.log(new Date())
     // }, 2000)
     // 2. setInterval()
     setInterval(function () {
     // 这个函数每间隔 2000ms 就执行一次
     console.log(‘我执行了’)
     console.log(new Date())
     }, 2000)
     定时器的返回值
     不分定时器种类, 只表示你是页面中的第几个定时器
     是一个数字 number 类型
     作用: 将来用来关闭定时器使用的
     // timer1 接收的就是 setTimeout 的返回值
     var timer1 = setTimeout(function () {
     console.log(‘setTimeout’)
     }, 1000)
     // timer2 接收的就是 setInterval 的返回值
     var timer2 = setInterval(function () {
     console.log(‘setInterval’)
     }, 1000)
     console.log(timer1)
     console.log(timer2)
     关闭定时器
     关闭定时器
  4. clearTimeout()
     作用: 关闭定时器
     语法: clearTimeout(你要关闭的定时器返回值)
  5. clearInterval()
     作用: 关闭定时器
     语法: clearInterval(你要关闭的定时器返回值)
     说明:
     关闭定时器是不分种类的, 可以互相关闭
     claerTimeout 能关闭 setTimeout 也能关闭 setInterval
     clearInterval 能关闭 setTimeout 也能关闭 setInterval
     // 1. 开启一个定时器
     var timer1 = setTimeout(function () {
     console.log(‘setTimeout 执行了’)
     }, 3000)
     var timer2 = setInterval(function () {
     console.log(‘setInterval 执行了’)
     }, 1000)
     // 关闭定时器
     // 为了方便看到效果, 依托再点击事件上
     btn.onclick = function () {
     // 关闭 定时器
     clearTimeout(1)
     // 关闭第二个定时器
     clearInterval(2)
     }
     异步执行代码: 当代码执行到异步的时候, 先暂时不执行, 继续向后
     直到所有的同步代码都执行完毕以后, 再回来执行这个异步代码
     同步执行代码: 按照代码从上到下的顺序执行
     我们 JS 里面大部分都是同步代码
     定时器是一个异步执行的代码**
     结论:
     当出现定时器的时候
     先执行定时器外面的代码
     后执行定时器里面的代码
     // console.log(‘start’)
     // setTimeout(function () {
     // console.log(‘定时器执行了’)
     // }, 1000)
     // console.log(‘end’)
     // console.log(‘start’)
     // 异步代码会在同步结束后再执行
     // 但是现在因为下面的死循环, 同步代码不会执行完毕
     // 这个异步代码永远不会执行出来
     // setTimeout(function () {
     // console.log(‘定时器执行了’) // 会不会被打印出来
     // }, 0)
     // for (var i = 0; i < 2; i–) {}
• {
  margin: 0;
  padding: 0;
  }
  html, body {
  width: 100%;
  height: 100%;
  }
  div {
  width: 150px;
  height: 70px;
  border: 1px solid #333;
  position: fixed;
  bottom: 0;
  right: 0;
  background-color: skyblue;
  }

X

流氓广告小案例 思路 1. 给 button 按钮绑定一个点击事件 2. 再点击的时候让 div 盒子隐藏 3. 再点击的时候设置一个定时器, 固定时间以后, 再让这个 div 显示出来 // 1. 给 button 按钮绑定一个点击事件 btn.onclick = function () { // 会在点击这个关闭按钮的时候触发 // 2. 让 div 盒子隐藏 box.style.display = 'none' // 3. 开启一个定时器, 在固定时间以后再让这个广告出来 // 每次关闭的时候, 都会设置一个延时定时器 setTimeout(function () { // 定时器里面让 div 再显示出来 box.style.display = 'block' console.log('定时器执行了') }, 1000) } DOM(Document Object Model) 文档对象模型 一套操作文档流的属性和方法(API) 就是对页面上的所有节点进行操作 元素的增删改查 元素的属性 元素的样式 ... DOM 就是由 document -> html -> head / body -> 其他元素 组成的一个树状结构 JS 是被 html 文件引入, 运行在浏览器里面 html 给我们提供了 DOM 浏览器 给我们提供了 BOM JS 提供了语法 他们三个在一起组成了一个完整的 JavaScript