JavaScript时间对象

最新推荐文章于 2024-08-21 15:17:08 发布

DingDing_Zhang

最新推荐文章于 2024-08-21 15:17:08 发布

阅读量298

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/DingDing_Zhang/article/details/107146529

JavaScript 专栏收录该内容

23 篇文章

订阅专栏

本文深入讲解JavaScript中的时间对象，包括创建时间对象的不同方法，如使用内置构造函数、传递数字或字符串，以及如何获取和设置时间对象内的年、月、日等信息。同时，介绍了时间戳的概念，以及如何计算两个时间点之间的差值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JavaScript 时间对象

时间对象是一个复杂数据类型

创建时间对象

一、内置构造函数创建时间对象

语法：

	var time = new Date()

返回值：就是你电脑上的当前时间（包含时区）

二、传递数字

通过传递不同的参数，获取到一个指定时间节点的时间对象
至少传递两个数字（传递一个数字得到的是格林威治时间）
- 第一个数字：表示年
- 第二个数字：表示月（0 表示 1 月, 11 表示 12 月）

	// 2018 年 1 月, 剩下的时间都按照默认值走
	var time = new Date(2018, 0)
    console.log(time) // Mon Jan 01 2018 00:00:00 GMT+0800 (中国标准时间)

第三个数字：表示日(1 表示 1 号, 31 表示 31 号)

	// 2018 年 1 月 2 号, 剩下的时间都按照默认值走
    var time = new Date(2018, 0, 2)
    console.log(time) // Tue Jan 02 2018 00:00:00 GMT+0800 (中国标准时间)

第四个数字：表示小时(0 表示 0 点, 23 表示 23 点)

	// 2018 年 1 月 2 号 15 点, 剩下的时间都按照默认值走
    var time = new Date(2018, 0, 2, 15)
    console.log(time) // Tue Jan 02 2018 15:00:00 GMT+0800 (中国标准时间)

第五个数字：表示分钟(0 表示 0 分, 59 表示 59 分)

	// 2018 年 1 月 2 号 15 点 55 分, 剩下的时间都按照默认值走
	var time = new Date(2018, 0, 2, 15, 55)
    console.log(time) // Tue Jan 02 2018 15:55:00 GMT+0800 (中国标准时间)

第六给我数字：表示秒钟(0 表示 0 秒, 59 表示 59 秒)

	// 2018 年 1 月 2 号 15 点 55 分 55 秒, 剩下的时间都按照默认值走
    var time = new Date(2018, 0, 2, 15, 55, 55)
    console.log(time) // Tue Jan 02 2018 15:55:55 GMT+0800 (中国标准时间)

第七个数字：表示毫秒(0 表示 0 毫秒, 999 表示 999 毫秒)

	// 2018 年 1 月 2 号 15 点 55 分 55 秒 666 毫秒, 剩下的时间都按照默认值走
    var time = new Date(2100, 0, 2, 15, 55, 55, 666)
    console.log(time) // Sat Jan 02 2100 15:55:55 GMT+0800 (中国标准时间)

三、传递字符串

一个字符串表示所有内容
‘YYYY-MM-DD HH:mm:ss’
- 只设置年月日时，可以一起设置
- 年月日之间可以用 - 连接，也可以用 / 连接
- 注：传递字符串的时候，1 就表示 1 月，12 就表示 12 月

	var time1 = new Date('2018-1-22')
    console.log(time1) // Mon Jan 22 2018 00:00:00 GMT+0800 (中国标准时间)

    var time2 = new Date('2018/1/22')
    console.log(time2) // Mon Jan 22 2018 00:00:00 GMT+0800 (中国标准时间)

    var time3 = new Date('2018/1/22 15:22:32')
    console.log(time3) // Mon Jan 22 2018 15:22:32 GMT+0800 (中国标准时间)

获取时间对象内数据的方法

就是从时间对象里面获取到某些信息

一、getFullYear( )

作用：获取时间对象里面的年份信息
语法：
- 时间对象.getFullYear( )
返回值：就是该时间对象里面的年份信息，是一个number类型

	var time = new Date()
    var year = time.getFullYear()
    console.log(year)

二、getMonth( )

作用：获取时间对象里面的月份信息(0 表示 1 月, 11 表示 12 月)
语法：
- 时间对象.getMonth( )
返回值：就是该时间对象里面的月份信息，是一个number类型

	var time = new Date()
	var month = time.getMonth()
    console.log(month)

三、getDate( )

作用：获取时间对象里面的日期信息
语法：
- 时间对象.getDate( )
返回值：就是该时间对象里面的日期信息, 是一个 number 类型

	var time = new Date()
	var date = time.getDate()
    console.log(date)

四、getHours( )

作用：获取时间对象里面的小时信息
语法：
- 时间对象.getHours( )
返回值：就是该时间对象里面的小时信息, 是一个 number 类型

	var time = new Date()
	var hours = time.getHours()
    console.log(hours)

五、getMinutes( )

作用：获取时间对象里面的分钟信息
语法：
- 时间对象.getMinutes( )
返回值：就是该时间对象里面的分钟信息, 是一个 number 类型

	var time = new Date()
	var minutes = time.getMinutes()
    console.log(minutes)

六、getSeconds( )

作用：获取时间对象里面的秒钟信息
语法：
- 时间对象.getSeconds( )
- 返回值：就是该时间对象里面的秒钟信息, 是一个 number 类型

	var time = new Date()
	var seconds = time.getSeconds()
    console.log(seconds)

七、getDay( )

获取时间对象里面的周几信息(1 表示周一, 0 表示周日)
语法：
- 时间对象.getDay( )
返回值：就是该时间对象里面的周几信息, 是一个 number 类型

	var time = new Date()
	var week = time.getDay()
    console.log(week)

八、getTime( )

作用：获取时间对象里面的时间戳(1970年至今的毫秒数)
语法：
- 时间对象…getTime( )
返回值：就是设置的时间对象里面的时间戳, 是一个 number 类型

	var time = new Date()
	var ms = time.getTime()
    console.log(ms)

九、Date.parse(‘设置的时间’)

作用：获取时间对象里面的时间戳(1970年至设置的时间的毫秒数)
语法：
- Date.parse(‘设置的时间’)
返回值：就是设置的时间对象里面的时间戳, 是一个 number 类型

	var time = new Date()
	var ms2 = Date.parse('2018/1/22 15:22:32')
    console.log(ms2)

十、格林威治时间和时间戳

我们计算机有一个计算机元年时间，叫做格林威治时间
格林威治时间(1970 年 1 月 1 号, 0 点 0 分 0 秒)
时间戳：就是从格林威治时间到指定时间的总毫秒数

设置时间对象的指定内容

我们只单独设置时间对象里面的某一个信息

一、setFullYear( )

作用：设置时间对象的年份信息
语法：
- 时间对象.setFullYear(你要设置的年份)

	var time = new Date()
    time.setFullYear(2018)
    console.log(time)

二、setMonth( )

作用：设置时间对象的月份信息(0 表示 1 月, 11 表示 12 月)
语法：
- 时间对象.setMonth(你要设置的月份)

 	var time = new Date()
 	time.setMonth(0)
    console.log(time)

三、setDate( )

作用：设置时间对象里面的日期信息
语法：
- 时间对象.setDate(你要设置的日期)

	var time = new Date()
	time.setDate(10)
    console.log(time)

四、setHours( )

作用：设置时间对象的小时信息
语法：
- 时间对象.setHours(你要设置的小时)

	var time = new Date()
	time.setHours(12)
    console.log(time)

五、setMinutes( )

作用：设置时间对象的分钟信息
语法：
- 时间对象.setMinutes(你要设置的分钟)

	var time = new Date()
	time.setMinutes(12)
    console.log(time)

六、setSeconds( )

作用：设置时间对象的秒钟信息
语法：
- 时间对象.setSeconds(你要设置的秒钟)

	var time = new Date()
	time.setSeconds(12)
    console.log(time)

七、setTime( )

作用：通过时间戳之间设置一个时间对象
语法：
- 时间对象.setTime(时间戳)

	var time = new Date()
	time.setTime(1515557532561)
    console.log(time) // Wed Jan 10 2018 12:12:12 GMT+0800 (中国标准时间)

八、特别说明

时间的计算会自动计算和递推
星期不可以设置

时间对象的获取和设置总结

	获取时间对象	设置时间对象
年份	getFullYear( )	setFullYear( )
月份	getMonth( )	setMonth( )
日期	getDate( )	setDate( )
星期	getDay( )	星期不可以设置
小时	getHours( )	setHours( )
分钟	getMinutes( )	setMinutes( )
秒钟	getSeconds( )	setSeconds( )
时间戳	getTime( ) 或者 Date.parse(‘时间’)	setTime ( )

获取时间差

<script>
    /*
      获取时间差

      1. 获取 时间节点A 到 格林威治的毫秒数
      2. 获取 时间节点B 到 格林威治的毫秒数
      3. 两个时间节点的毫秒数相减, 得到两个时间节点之间相差的毫秒数
        因为相减的时候, 我不确定谁大谁小
        所以我最好是随便减一个, 取绝对值
      4. 通过相差的毫秒数换算出是 多少天多少小时多少分钟多少秒
        4-1. 换算天数
          总的秒数 / 一天的秒数 得到的就是 多少天(小数)
          我们只需要整天数, 不够整天的按照小时算
          Math.floor() 取整一下
        4-2. 换算小时
          总的秒数 % 一天的秒数 剩下的就是不够一天的秒数
          用剩下的秒数 / 一小时的秒数 得到的就是 多少小时(小数)
          我门只需要整小时数, 不够一个小时的按照分钟取计算
          Math.floor() 取整一下
        4-3. 换算分钟
          总的秒数 % 一小时的秒数 剩下的就是不够一小时的秒数
          用剩下的秒数 / 一分钟的秒数 得到的就是多少分钟(小数)
          我们只需要整分钟数, 不够一分钟的按照秒钟计算
          Math.floor() 取整一下
        4-4. 换算秒钟
          总的秒数 % 一分钟的秒数 剩下的就是不够一分钟的秒数
    */

    
    // 0. 准备两个时间节点
    // 2020 年 5 月 22 号 16 点 50 分 32 秒
    var time1 = new Date('2020-5-22 16:50:32')
    // 当前的时间节点
    var time2 = new Date()
    // 计算从现在到明天晚上下课还有多少时间

    // 1. 获取 time1 的时间戳
    var t1 = time1.getTime()
    
    // 2. 获取 time2 的时间戳
    var t2 = time2.getTime()
    
    // 3. 获取两个毫秒数之间的差值(直接计算到秒)
    var diff = Math.floor(Math.abs(t1 - t2) / 1000)
    
    // 4. 通过 diff 换算
    // 4-1. 换算天
    var day = Math.floor( diff / (60 * 60 * 24) )
    // 4-2. 换算小时
    var hours = Math.floor( diff % (60 * 60 * 24) / (60 * 60) )
    // 4-3. 换算分钟
    var minutes = Math.floor( diff % (60 * 60) / 60 )
    // 4-4. 换算秒钟
    var seconds = diff % 60

    console.log(day, hours, minutes, seconds)
  </script>

时间差封装函数

<script>
    /*
      封装一个计算时间差的函数

      1. 准备一个函数, 接收两个参数, 就是两个时间节点

      2. 计算两个时间节点之间相差的 天数 小时数 分钟数 秒数
        我们计算时间差的思路
        2-1. 计算出两个时间节点之间相差的秒数

      3. 把计算结果返回
        因为我要返回四个数据
        我们的一个 return 只能返回一个数据
        两种:
          放到数组里面 [1, 6, 58, 56]
            可以实现效果, 但是对于每一个数据没有指向性的说明
          放到对象里面 { day: 1, hours: 6, minutes: 58, seconds: 56 }
            可以实现效果, 并且对于每一个数据都有明确的指向性
    */

   
   	// 1. 准备一个计算两个时间之间时间差的函数
    function timeDiff(time1, time2) {
      // 两个参数表示两个时间节点

      // 2. 计算两个时间节点之间的差值(天, 小时, 分钟, 秒钟)
      // 2-1. 计算两个时间节点之间相差的秒数
      var diff = Math.floor(Math.abs(time1.getTime() - time2.getTime()) / 1000)
      // 2-2. 通过 diff 换算两个时间节点之间相差的天, 小时, 分钟, 秒钟
      var day = Math.floor( diff / (60 * 60 * 24) )
      var hours = Math.floor( diff % (60 * 60 * 24) / (60 * 60) )
      var minutes = Math.floor( diff % (60 * 60) / 60 )
      var seconds = diff % 60

      // 3. 返回一个对象, 里面包含所有信息
      // 3-1. 创建一个对象
      var obj = {}
      // 3-2. 向对象里面添加成员
      obj.day = day // 把 day 变量的值赋值给了 obj 的 day 成员
      obj.hours = hours
      obj.minutes = minutes
      obj.seconds = seconds
      // 3-3. 把这个对象返回
      return obj
    }

    // 使用 timeDiff 函数计算两个时间节点之间的时间差
    var time1 = new Date('2020-10-01 00:00:00')
    var time2 = new Date()
    var res = timeDiff(time1, time2)
    document.write('距离国庆还有 ' + res.day + ' 天 ' + res.hours + ' 小时 ' + res.minutes + ' 分钟 ' + res.seconds + ' 秒!^_^')
    // 时间是没有样式的
    // 当你把这个数字渲染到页面的 span 标签里面
    // 给 spen 标签一个样式
  </script>

时间差封装函数—时间倒计时

<script>
    /*
        国庆倒计时
    */
   
    // 调用函数
    timeDiff()
    
    // 使用 timeDiff 函数计算两个时间节点之间的时间差
    function timeDiff(time1, time2) {
        
        // 计算两个时间节点之间相差的秒数
        var time1 = new Date()
        var time2 = new Date('2020-10-01 00:00:00')        
        var diff = Math.floor(Math.abs(time1.getTime() - time2.getTime()) / 1000)
        
        // 通过 diff 换算两个时间节点之间相差的天, 小时, 分钟, 秒钟
        var day = Math.floor(diff / (60 * 60 * 24))
        var hours = Math.floor(diff % (60 * 60 *24) / (60 * 60))
        var minutes = Math.floor(diff % (60 * 60) / 60)
        var seconds = diff % 60
        
        // 在页面上输出结果
        h.innerHTML = '距离国庆还剩：' + day + '天' + hours + '小时' + minutes + '分钟' + seconds + '秒！！！'
        
        // 设置一个定时器，使页面每隔一秒获取一次倒计时的相关数据
        var timer = setInterval(function () {
            
            // 计算两个时间节点之间相差的秒数
            var time1 = new Date()
            var time2 = new Date('2020-10-01 00:00:00')           
            var diff = Math.floor(Math.abs(time1.getTime() - time2.getTime()) / 1000)
           
            // 通过 diff 换算两个时间节点之间相差的天, 小时, 分钟, 秒钟
            var day = Math.floor(diff / (60 * 60 * 24))
            var hours = Math.floor(diff % (60 * 60 *24) / (60 * 60))
            var minutes = Math.floor(diff % (60 * 60) / 60)
            var seconds = diff % 60
            
            // 在页面上输出结果
            h.innerHTML = '距离国庆还剩：' + day + '天' + hours + '小时' + minutes + '分钟' + seconds + '秒！！！'
        
        },1000)  
    }
</script>