01回顾
02日期时间对象Date
1 =>作用:处理日期时间
=>创建对象:
构造函数
var date = new Date()
=>表示当前日期时间
2 =>常用方法
getFullYear()
getMonth() //月份从0开记数，当前月份需要值加一
getDate()
getHours()
getMinutes()
getSeconds()
getTime()
getDay()
3 => 创建指定日期时间对象
var date = new Date('2021-3-16')
var date = new Date(2021,3,16) //当前月份需要值减一
4 =>格式化日期时间
以上指定和未指定的日期显示都是：
Fri Mar 18 2022 09:24:31 GMT+0800 (中国标准时间)
-> 2022-3-18 09:24:31
2022年3月18日 09时24分31秒
注意：若要月日都是两位数，则加判断语句
String(month).length==1?'0'+month:month
数字要转换成字符串 才可以使用点语句判断长度
5 =>计算时间差值
例如：我们现在计算一下 2019-01-01 00:00:00 到 2019-01-03 04:55:34 的时间差
2019-01-03 04:55:34 - 2019-01-01 00:00:00
1. 转日期时间为毫秒
date1.getTime() 123122312
date2.getTime() 212312323
计算机时间的原点
格林威治时间(1970年1月1日（00:00:00 GMT）) 的毫秒数
相差的总毫秒 = date2.getTime() - date1.getTime()
转化 相差的总毫秒
年 月 日 时 分 秒
212312323
一年毫秒 1000 * 60 * 60 * 24 * 365
一月毫秒 1000 * 60 * 60 * 24 * 30
...
03.BOM
BOM 浏览器对象模型
javascript三大组成
ECMAScript javascript基础语法
BOM 浏览器对象模型
提供操作浏览器的能力
DOM 文档对象模型
提供操作文档对象的能力
BOM 浏览器对象模型
提供操作浏览器的能力
- 获取一些浏览器的相关信息（窗口的大小）
- 操作浏览器进行页面跳转
- 获取当前浏览器地址栏的信息
- 操作浏览器的滚动条
- 浏览器的信息（浏览器的版本）
- 让浏览器出现一个弹出框（alert/confirm/prompt）
- BOM 的核心就是 window 对象
window 是浏览器内置的一个对象，里面包含着操作浏览器的方法
window对象
=>浏览器窗口对象,它是根对象,下面还有history历史记录对象，location位置对象...
=>创建: 当打开浏览器窗口打开自动创建window对象
=>属性和方法
1、常用方法：
1. 对话框 alert&confirm&prompt
alert() 信息提示框
注意：
弹框样式
后续代码被阻塞（点击确定之后才会继续执行后续代码）
window可以不写
confirm() 信息确认框
返回值：
=>确定 true
=>取消 false
prompt() 内容输入框
返回值：
=>点击取消-返回 null ；输入信息，则返回对应内容
=>内容是字符串string，如果参与算术运算需要转换为number类型
2.open() & close()
open('','','') 打开一个新的浏览器窗口，加载给定url所指定的文档
window.open(url, [name], [configuration]) //目前写个地址就行
三个参数 :地址 名字 窗口属性
close() 关闭浏览器窗口
可以结合按钮绑定事件更好实现效果
事件属性 onclick
<button onclick="window.close()">关闭</button>
onclick 事件属性
值: js代码
3.定时器
什么是定时器：
我们可以看到很多网站首页有一个“图片轮播”特效，每隔2s图片变换一次，这里就用到了定时器。
定时器用途非常广，在图片轮播、在线时钟、弹窗广告等地方大显身手。凡是自动执行的东西，很大可能都是跟定时器有关。
setTimeout(函数参数，指定时间毫秒)
=>倒计时定时器
启动倒计时定时器，到了指定时间执行函数中代码
=>返回当前定时器对象
var timeoutObj = setTimeout(function(){
//执行代码
},1000)
window.clearTimeout(timoutObj)
=>结束定时器 参数是倒计时定时器的的名字即返回值
setInterval()
=>循环定时器
var inervalObj= setInterval(function(){
//执行代码
},1000)
clearInterval(inervalObj)
2、window常用属性：
innerHeight && innerWidth
获取浏览器窗口的宽度和高度（包含滚动条的）
onscroll 事件属性 滚动事件
当浏览器的滚动条滚动的时候触发 | 鼠标滚动的时候触发
注意：前提是页面的高度要超过浏览器的窗口才可以
window.onscroll = function(){
//滚动执行的代码
}
事件三要求:
=>1. window对象： 事件源
谁身上触发事件，谁就是事件源
=>2. onscroll: 事件类型
事件类型名: 滚动事件
=>3. 事件处理函数:
当事件触发执行调用的函数
浏览器滚动的距离
事实上：浏览器没有动，是页面在往上走，所以是document对象
scrollTop 获取页面卷入的高度 == 滚动条距离顶部的距离
注：两种方式获取高度：
document.documentElement.scrollTop 获取高度
document.documentElement.scrollTop = 0 给高度赋值
没有文档声明的时候，使用
document.body.scrollTop
scrollLeft 获取页面向左滚动的距离
3、window子对象
1.历史记录对象 history
获取history对象 window.history
方法：
history.go(-1)代表back 浏览器中的前进
history.go(1) 代表forward 浏览器中的后退
back() 加载对象列表中的前一个url
forward() 用途加载对象列表中的后一个url
go() 加载对象列表中的某个具体url
function nextHistoryPage(){
window.history.forward();
}
function preHistoryPage(){
window.history.back();
}
<a href="javascript:nextHistoryPage();">下一页</a>
<a href="javascript:preHistoryPage()">上一页</a>
2.location 操作地址栏 位置对象
开发场景：跳转到商品的详情页面
常用属性：
hash 获取hash值，url地址后的内容
'http://www.baidu.com#login'
location.href 获得当前页面的URL地址(window.location.href)
获取值和设置值
var url = location.href
location.href = 'http://www.baidu.com' //跳转到新的页面
常用方法：
location.reload() 重新加载当前文档：
