时间对象和BOM
1.时间对象:Date
- 语法: var time = new Date()
- 不传参数默认是当前时间
- 传了参数获取的就是指定的时间
2.时间对象接收参数有两种格式
- 数字传参
月份是从0开始 实际1月是0 实际2月是1
var time = new Date(2008,00,20,12,13,14) //参数顺序是: 年-月-日 时-分-秒
console.log(time);
- 字符串传参
var time = new Date('2008-01-20 13:14:16') //年-月-日 时:分:秒
console.log(time);
3.格式化时间对象
var time = new Date() //获取当前时间
//获取年份
var year = time.getFullYear();
console.log(year);
//获取月份
var month = time.getMonth();
console.log(month);
//获取每周的第几天
var day = time.getDay();
console.log(day);
//获取每月的第几天
var day1 = time.getDate();
console.log(day1);
//获取小时
var hours = time.getHours();
console.log(hours);
//获取分钟
var minutes = time.getMinutes();
console.log(minutes);
//获取秒钟
var seconds = time.getSeconds();
console.log(seconds);
4.获取格林尼治时间
//获取格林尼治时间 1970年1月1日0时0分0秒
var time = new Date()//获取当前时间
console.log(timer)
console.log(timer.getTime())
/*
计算两个指定日期的时间差
1.先获取到两个时间距离1970~~~毫秒数
2.计算两个毫秒数的差值 ====得到总毫秒数
3.计算总毫秒数内有多少个完整的天数
parseInt(总毫秒数/一天的毫秒数)
4.用剩余不足一天的毫秒数去计算时分秒
*/
5.设置时间对象
- 语法: 时间对象.setXXX()
var time = new Date();
console.log(time);
//设置年
time.setFullYear(2008);
var year = time.getFullYear();
console.log(year);
//设置月
time.setMonth(11);
var month = time.getMonth();
console.log(month);
//设置日
time.setDate(20);
var mDate = time.getDate();
console.log(mDate);
//设置小时
time.setHours(10);
var hours = time.getHours();
console.log(hours);
//设置分钟
time.setMinutes(40);
var minutes = time.getMinutes();
console.log(minutes);
//设置秒
time.setSeconds(40);
var seconds = time.getSeconds();
console.log(seconds);
//设置毫秒
time.setMilliseconds(840);
var milli = time.getMilliseconds();
console.log(milli);
//直接设置距离1970的总毫秒
var time = new Date()
console.log(time.getTime())
time.setTime(12354892);
console.log(time.getTime())
6.认识BOM
-
BOM:浏览器对象模型
-
可以理解为浏览器给我们提供了一系列方法
- 可以打开一个浏览器弹窗框
- 记录当前窗口大小
- 操作页面跳转
7.获取浏览器窗口的尺寸
//JS的全局作用域,有一个window对象,BOM写法都在window里面
//语法:window.XXX 但是window可以忽略不写
console.log(window.innerHeight)
console.log(window.innerWidth)
8.浏览器的弹窗框
//浏览器的弹窗框(confirm/alert/prompt进入页面吗
var res = confirm('请问您确定页面') //实际开发不会用
console.log(res);
9.浏览器的地址信息
- window有一个location内部记录浏览器的地址信息
- location内部有一个href属性,可以获取当前浏览器的地址,也可以给他赋值新地址,实现页面跳转
setTimeout(function () {
window.location.href = 'https://www.baidu.com/'
}, 3000)
10.浏览器的刷新功能
- window对象内部有一个location它的内部有一个reload方法(刷新)
var count = 0
setInterval(function () {
count++;
console.log(count);
if (count == 10) {
window.location.reload() ;// 不要把刷新写在外部, 写在一个条件内
}
}, 1000)
11.浏览器的历史记录
- 浏览器的历史记录(模拟左上角的回退与前进)
- window内部有一个history内部有方法能够让我们实现浏览器的前进回退
- window.history.back() 回退
- window.history.forward() 前进(必须现有过一次回退,才能使用前进)
12.浏览器版本信息(了解)
- window对象中navigator对象可以查到相关信息
13.浏览器onload事件
- onload事件,等到页面的所有资源加载完毕后在执行
- 浏览器的图片加载是异步的
14.浏览器的onscroll事件
- 浏览器的滚动距离: 因为是页面滚动,所以需要使用document对象获取滚动的距离
- 方法:
- document.body.scrollTop 在浏览器没有声明
- document.documentElement.scrollTop 在浏览器声明了
- document.body.scrollLeft 在浏览器没有声明
- document.documentElement.scrollLeft 在浏览器声明了
window.onscroll = function () {
console.log('滚动开始')
// console.log(
// 'document.body.scrollTop: ', document.body.scrollTop,
// 'document.documentElement.scrollTop: ', document.documentElement.scrollTop
// )
console.log(
'document.body.scrollLeft: ', document.body.scrollLeft,
'document.documentElement.scrollLeft: ', document.documentElement.scrollLeft
)
}
15.localStorage
- 浏览的本地存储(永久存储),打开浏览器存储之后,关闭浏览器,信息还在
- localStorage 的存储语法 window.localStorage.setItem(key, value)
- value 的值必须为 字符串
- key的书写符合知名见意
window.localStorage.setItem('QQ', '12345')
window.localStorage.setItem('MiMa', '456789')
window.localStorage.setItem('ceshi3', '3333')
window.localStorage.setItem('ceshi4', '44444444')
window.localStorage.setItem('ceshi5', '555555')
window.localStorage.setItem('YZM', '658486')
/*
2. localStorage 的删除语法 window.localStorage.removeItem(key)
window.localStorage.removeItem('ceshi1')
3. localStorage 的清除语法 window.localStorage.clear()全部清除
window.localStorage.clear()
4. localStorage 的获取语法 window.localStorage.getItem(key)
console.log(window.localStorage.getItem('YZM'))
*/
16.sessionStorage: 浏览器的临时存储
-
特点: 页面关闭直接清除数据
-
设置语法: window.sessionStorage.setItem(key, value) value 的值必须为 字符串
-
清除语法: window.sessionStorage.clear()
-
ISON两个方法:
- JSON.stringify() 将其他类型的数据, 转为字符串格式
- JSON.parse 将字符串的数据类型还原
- window.sessionStorage.removeItem('');
// JSON 的两个方法
var obj = [1, 2, 3, 4, 5]
window.sessionStorage.setItem('OBJ', JSON.stringify(obj)) //JSON.stringify() 将其他类型的数据, 转为字符串格式
var newObj = JSON.parse(window.sessionStorage.getItem('OBJ')) // JSON.parse 将字符串的数据类型还原
console.log(newObj)
