js 中: 时间对象\时间对象接收参数有两种格式\格式化时间对象\计算两个指定日期的时间差\设置时间对象\浏览器地址与刷新功能等

玩心跳我们更专业
75 阅读3分钟 
1.
     *  时间对象
     *      Date()
     * 
     *  语法 var timer = new Date()
     * 
     *      千万不要记忆为  data
    
    var timer = new Date()   // 默认获取到当前时间
    console.log(timer)

    var timer1 = new Date('2022-11-1 12:13:14') // 获取到指定时间
    console.log(timer1)
2.
    *  时间对象接收参数有两种格式
     * 
     *          1. 数字
     *          2. 字符串
    */

    // 1. 数字传参
    // 月份从 0 开始        实际的1月 0 实际的2月 1
    // var timer = new Date(2008, 00, 20, 12, 13, 14)  // 参数顺序为  年 - 月 - 日  时 - 分 - 秒
    var timer = new Date('2008-01-20 13:14:15') // 年-月-日 时:分:秒
    console.log(timer)

3.格式化时间对象
     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)
4.
   *   计算两个指定日期的时间差
     * 
     *  1. 先获取到两个时间距离1970~~~毫秒数
     *  2. 计算两个毫秒数的差值     ---->  得到了总毫秒数
     *  3. 计算总毫秒数内 有多少个 完整的  天
     *          parseInt(总毫秒数 / 一天的毫秒数)
     * 
     *  4. 用剩余不足一天的毫秒数 去计算出 时 分  秒 
5.
    *  设置时间对象
     *  
     *  语法: 时间对象.setXXXX()
    */
    var timer = new Date()
    console.log(timer.getTime())

    // 设置 年
     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())
6.
    *  浏览器的地址信息
     *  
     *  window 有一个 location 内部记录了浏览器的地址信息
     * 
     * 
     *  location 内部有一个 href 属性, 可以获取当前浏览器的地址, 也可以给他赋值新地址, 实现页面跳转
    */
    setTimeout(function () {
        window.location.href = '网址地址'
    }, 3000)
7.
    *   浏览器的刷新功能
     *      window 对象内部有一个 location 他的内部有一个 reload 方法
     * 
     *      这个方法就是 刷新
    */
    var count = 0
    setInterval(function () {
        count++
        console.log(count)

        if (count == 5) {
            window.location.reload() // 不要把刷新写在外部, 写在一个条件内
        }
    }, 1000)
8.
    *  浏览器的历史记录(模拟左上角的回退与前进)
     * 
     *  window 内部有一个 history 内部有方法能够让我们能实现浏览器的 前进回退功能
     * 
     *  window.history.back()    回退
     *  window.history.forward()    前进(必须现有过一次回退, 才能使用前进)
9.
    *  浏览器的滚动距离
     *      因为是页面滚动, 所以需要使用 document 对象去获取滚动的距离
     * 
     *  方法:
     *      document.body.scrollTop             在浏览器没有声明 <!DOCTYPE html>
     *      document.documentElement.scrollTop  在浏览器声明了 <!DOCTYPE html>
     *      document.body.scrollLeft             在浏览器没有声明 <!DOCTYPE html>
     *      document.documentElement.scrollLeft  在浏览器声明了 <!DOCTYPE html>
     
     
     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
        )
    }
10.
    *  本地存储(面试必问)
     *      1. localStorage
     *              * 浏览器的本地存储(永久存储), 打开浏览器存储上之后, 关闭浏览器, 信息还在
     *      2. sessionStorage
     *      3. cookie
    */

    /**
     * 1. 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')


    /**
     * 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('qq'))
11.
    *  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 的两个方法 
    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)
avatar
文章
阅读
粉丝