时间对象的认识及BOM的了解和应用

彬塬
137 阅读3分钟

时间对象

语法 var time = new Date()

var timer = new Date()                      // 默认获取到当前时间
console.log(timer)

时间对象接收参数有两种格式
    1. 数字
    2. 字符串

var timer = new Date(2020, 00, 20, 12, 13, 14)  // 参数顺序为  年 - 月 - 日  时 - 分 - 秒

var timer1 = new Date('2022-11-1 12:13:14') // 获取到指定时间
console.log(timer1)

获取到年月日时分秒时间

// 获取年
var year = timer.getFullYear()
console.log(year)
// 获取月
var month = timer.getMonth()
console.log(month)
// 获取每周的第几天
var day = timer.getDay()
console.log(day)
// 获取每月的第几天
var day1 = timer.getDate()
console.log(day1)

// 获取小时
var hours = timer.getHours()
console.log(hours)

// 获取分钟
var minutes = timer.getMinutes()
console.log(minutes)

// 获取秒钟
var seconds = timer.getSeconds()
console.log(seconds)

格林尼治时间

// 获取格林尼治时间  1970年1月1号0时0分0秒,到现在的毫秒数
var timer = new Date()
console.log(timer)
console.log(timer.getTime())

计算两个指定日期的时间差

1. 先获取到两个时间距离1970~~~毫秒数
2. 计算两个毫秒数的差值     ---->  得到了总毫秒数
3. 计算总毫秒数内 有多少个 完整的  天
    parseInt(总毫秒数 / 一天的毫秒数)
4. 用剩余不足一天的毫秒数 去计算出 时 分  秒

时间对象

设置时间对象
    语法: 时间对象.setXXXX()

// 设置 年
timer.setFullYear(2008)
var year = timer.getFullYear()
console.log(year)

// // 设值 月
timer.setMonth(11)  // 月 是从 0~11
var month = timer.getMonth()
console.log(month)

// // 设置 天
timer.setDate(20)
var mDate = timer.getDate()
console.log(mDate)

// // 设值 时
timer.setHours(20)
var hours = timer.getHours()
console.log(hours)

// // 设置 分钟
timer.setMinutes(40)
var minutes = timer.getMinutes()
console.log(minutes)

// // 设置 秒钟
timer.setSeconds(50)
var seconds = timer.getSeconds()
console.log(seconds)

// // 设置 毫秒
timer.setMilliseconds(888)
var milli = timer.getMilliseconds()
console.log(milli)

// 直接设置 距离1970 的总毫秒
timer.setTime(123456789)
console.log(timer.getTime())

认识BOM

JS 的全局作用域, 有一个 window 对象, 我们 BOM 的方法都在他里边
    使用的时候 语法 window.XXX，但是 window可以忽略不写

console.log(window.innerHeight)
console.log(window.innerWidth)

浏览器的弹出层 (confirm / alert / prompt)

var boo = confirm('请问您确定进入页面') // 实际开发不会用
console.log(boo)

浏览器的地址信息

window 有一个 location 内部记录了浏览器的地址信息
location 内部有一个 href 属性, 可以获取当前浏览器的地址, 也可以给他赋值新地址, 实现页面跳转

setTimeout(function () {
    window.location.href = 'https://www.baidu.com/'
}, 3000)

浏览器的刷新功能

window 对象内部有一个 location 他的内部有一个 reload 方法
这个方法就是 刷新

不要把刷新写在外部, 写在一个条件内，否则界面一直刷新无法进行页面展示

浏览器的历史记录(模拟左上角的回退与前进)

window 内部有一个 history 内部有方法能够让我们能实现浏览器的 前进回退功能
window.history.back()       回退
window.history.forward()    前进(必须现有过一次回退, 才能使用前进)

浏览器的onload事件

onload 事件, 等到页面的所有资源加载完毕后在执行
浏览器的图片加载是异步的

浏览器的 onscroll 事件

其实就是浏览器的滚动事件, 浏览器页面滚动的时候会触发

window.onscroll = function () {
    console.log('页面滚动~~~')
}

浏览器的滚动距离
    因为是页面滚动, 所以需要使用 document 对象去获取滚动的距离
    方法:
    document.body.scrollTop             在浏览器没有声明 <!DOCTYPE html>
    document.documentElement.scrollTop  在浏览器声明了 <!DOCTYPE html>
    document.body.scrollLeft             在浏览器没有声明 <!DOCTYPE html>
    document.documentElement.scrollLeft  在浏览器声明了 <!DOCTYPE html>

本地存储

1. localStorage
    浏览器的本地存储(永久存储), 打开浏览器存储上之后, 关闭浏览器, 信息还在
2. sessionStorage
    浏览器的临时存储
    特点: 页面关闭直接清除数据
3. cookie

1.1 localStorage 的存储语法 window.localStorage.setItem(key, value)
    注意: value 的值必须为 字符串

    window.localStorage.setItem('qq', '888888')
    window.localStorage.setItem('mima', '666666')

1.2 localStorage 的删除语法 window.localStorage.removeItem(key)

1.3 localStorage 的清除语法 window.localStorage.clear()
    window.localStorage.clear()

1.4 localStorage 的获取语法 window.localStorage.getItem(key)
    console.log(window.localStorage.getItem('qq'))

2.1sessionStorage
    window.sessionStorage.setItem(key, value)  value 的值必须为字符串
    window.sessionStorage.setItem('VX', '@@@88888')

2.2获取语法
    console.log(window.sessionStorage.getItem('VX'))

2.3删除语法
    window.sessionStorage.removeItem('VX')

2.4 清除语法
    window.sessionStorage.clear()

JSON 的两个方法

var obj = [1, 2, 3, 4, 5]
// 1. JSON.stringify()  将其他类型的数据, 转为字符串格式
window.sessionStorage.setItem('OBJ', JSON.stringify(obj)) 
// 2. JSON.parse    将字符串的数据类型还原  
var newObj = JSON.parse(window.sessionStorage.getItem('OBJ'))   
console.log(newObj)
avatar
文章
阅读
粉丝