时间对象
- Date( )
- 语法:var timer=new Date( )
-
var timer = new Date() // 默认获取到当前时间 console.log(timer) var timer1 = new Date('2022-11-1 12:13:14') // 获取到指定时间 console.log(timer1)
格式化时间对象
var timer = new Date() // 获取当前时间
// console.log(timer)
// 获取年
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)
案例
- 计算两个指定日期的时间差
-
// 1.1 获取到两个指定的时间 var prevTime = new Date('2022-10-20 0:0:0') var currentTime = new Date() // 1.2 获取到两个指定时间到1970~的毫秒数 var prevTimeMilli = prevTime.getTime() var currentTimeMilli = currentTime.getTime() // 2. 获取两个时间相差的总毫秒数 var time = currentTimeMilli - prevTimeMilli console.log(time)
- 计算有多少完整的天
-
// 1.1 获取到两个指定的时间 var prevTime = new Date('2022-10-20 0:0:0') var currentTime = new Date() // 1.2 获取到两个指定时间到1970~的毫秒数 var prevTimeMilli = prevTime.getTime() var currentTimeMilli = currentTime.getTime() // 2. 获取两个时间相差的总毫秒数 var time = currentTimeMilli - prevTimeMilli console.log(time) /** * 3.1 计算有多少 完整的 天 * 计算公式: parseInt(time / 一天的毫秒数) === 有多少个完整的 天 * parseInt(time / 1000 * 60 * 60 * 24) * 1秒 === 1000 * 1分钟 === 1000 * 60 * 1小时 === 1000 * 60 * 60 * 一天 === 1000 * 60 * 60 * 24 * * 3.2 计算剩余不足一天的毫秒数 * 计算公式: 总毫秒 - 完整天数 * 一天的毫秒数 */ var onDayMilli = 1000 * 60 * 60 * 24 // 一天的毫秒数 var day = parseInt(time / onDayMilli) // 有多少个完整的 天 time = time - day * onDayMilli /** * 4.1 计算有多少完整的 小时 * 计算公式: parseInt(time / 一小时的毫秒数) === 有多少完整的 小时 * * 4.2 计算一下 不足一小时的 毫秒数 * 计算公式: 总毫秒 - 完整的小时 * 一小时的毫秒数 */ var onHoursMilli = 1000 * 60 * 60 // 一小时的毫秒数 var hours = parseInt(time / onHoursMilli) // 计算出了 有 多少个 完整的 小时 time = time - hours * onHoursMilli // 计算剩余不足一小时的 毫秒数 /** * 5.1 计算有多少完整的 分钟 * 计算公式: parseInt(time / 一分钟的毫秒数) === 有多少完整的 分钟 * * 5.2 计算一下 不足一分钟的 毫秒数 * 计算公式: 总毫秒 - 完整分钟 * 一分钟的毫秒数 */ var oneMinutesMilli = 1000 * 60 var minutes = parseInt(time / oneMinutesMilli) // 计算出了 有多少 完整的 分钟 time = time - minutes * oneMinutesMilli /** * 6 计算一下 有多少 完整的 秒 * 计算公式: parseInt(time / 一秒钟的毫秒数) === 有多少完整的 秒 */ var seconds = parseInt(time / 1000) console.log(`现在过了有 ${day} 天 ${hours} 小时 ${minutes} 分钟 ${seconds} 秒`)
设置时间对象
- 语法：时间对象.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的总毫秒
-
// 直接设置 距离1970 的总毫秒 timer.setTime(123456789) console.log(timer.getTime())
获取浏览器窗口的尺寸
- 语法：window.XXX
-
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 方法
-
var count = 0 setInterval(function () { count++ console.log(count) if (count == 5) { window.location.reload() // 不要把刷新写在外部, 写在一个条件内 } }, 1000)
浏览器的历史记录
- 浏览器的历史记录(模拟左上角的回退与前进)
- window 内部有一个 history 内部有方法能够让我们能实现浏览器的 前进回退功能
- window.history.back() 回退
- window.history.forward() 前进(必须现有过一次回退, 才能使用前进)
浏览器的版本信息
- window 对象 中的 navigator 对象可以查到相关信息
浏览器的onload事件
- onload 事件, 等到页面的所有资源加载完毕后在执行
- 浏览器的图片加载是异步的
-
window.onload = function () { console.log(100) }
浏览器的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> */
localStorage--面试
- 浏览器的本地存储(永久存储), 打开浏览器存储上之后, 关闭浏览器, 信息还在
- localStorage 的存储语法： window.localStorage.setItem(key, value)
- 注意: value 的值必须为 字符串
- key 的书写 符合见名知意
-
window.localStorage.setItem('qq', '888888') window.localStorage.setItem('mima', '666666') window.localStorage.setItem('ceshi3', '3333333333') window.localStorage.setItem('ceshi4', '4444444444') window.localStorage.setItem('ceshi5', '555555555') window.localStorage.setItem('a', '666666666666') - localStorage 的删除语法: window.localStorage.removeItem(key)
-
window.localStorage.removeItem('ceshi1') - localStorage 的清除语法: window.localStorage.clear()
-
window.localStorage.clear()
- localStorage 的获取语法: window.localStorage.getItem(key)
-
console.log(window.localStorage.getItem('qq'))
sessionStorage
- 浏览器的临时存储
- 特点：页面关闭直接清除数据
- 设置语法：window.sessionStorage.setItem(key, value) value 的值必须为 字符串
-
window.sessionStorage.setItem('VX', '@@@88888@@@@')
- 获取语法：
-
console.log(window.sessionStorage.getItem('VX'))
- 删除语法：
-
window.sessionStorage.removeItem('VX')
- 清除语法：
-
window.sessionStorage.clear()
JSON的两个方法：
// JSON 的两个方法
var obj = [1, 2, 3, 4, 5]
window.sessionStorage.setItem('OBJ', JSON.stringify(obj)) // 1. JSON.stringify() 将其他类型的数据, 转为字符串格式
var newObj = JSON.parse(window.sessionStorage.getItem('OBJ')) // 2. JSON.parse 将字符串的数据类型还原
console.log(newObj)
