搜尋
首頁web前端js教程JavaScript日期物件Date(總結分享)

這篇文章為大家帶來了關於javascript的相關知識,其中主要整理了日期對象Date的相關問題,包括了Date對象的創建、Date對象的方法等等內容,下面一起來看一下,希望對大家有幫助。

JavaScript日期物件Date(總結分享)

【相關推薦:javascript影片教學web前端

日期和時間是程式設計過程中不可繞過的必修課,好在JavaScript為我們準備好了一個內建的物件Date(日期)。透過該對象,我們可以建立、儲存、修改、測量時間、列印等基礎操作,是每個JavaScript程式設計師的必修課之一。

Date物件的建立

和普通的物件一樣,我們可以使用new Date()來建立一個Date對象,還可以在創建的時候傳入一些初始化參數。

new Date()

不帶參數的建立案例:

let now = new Date()console.log(now)

程式碼執行結果如下:

JavaScript日期物件Date(總結分享)

這樣就簡單的輸出了程式碼執行時的具體時間,這裡顯示的就是2022年6月22日19點25份24秒

new Date(milliseconds)

建立一個帶有毫秒參數的日期對象,其中milliseconds指的是自1970年1月1日UTC 0之後的毫秒數(1毫秒=1/1000秒)。

//创建一个时间,举例1970.1.1时间点0毫秒
let jan01_1970 = new Date(0)
console.log(jan01_1970)

//创建一个时间,比1970年1.1时间点晚3天(3天*24小时*3600秒*1000毫秒)
let jan04_1970 = new Date(3 * 24 * 3600 * 1000)
console.log(jan04_1970)

程式碼執行結果:

JavaScript日期物件Date(總結分享)

milliseconds就是從1970年1月1日00:00:00以來,經過的毫秒數,或稱為時間戳

時間戳記是一種簡單的日期數位化表示方式,我們通常使用new Date(milliseconds)來建立一個日期。如果我們已經有了一個日期Date對象,可以使用date.getTime()來獲得日期對應的時間戳記。

注意:

中國處於動8區,所以上例中的時間都不是00:00:00,而是08:00:00

1970年之前的時間?

時間戳記不只是整數,也可以是負數,例如:

//1969-12-31 00:00:00let dec31_1969 = new Date(-24 * 3600 * 1000)console.log(dec31_1969)

程式碼執行結果:

JavaScript日期物件Date(總結分享)

new Date(date_str )

如果每次創建時間都是用時間戳,可能並不方便,因為時間戳計算還是有點難度的。

我們也可以使用時間字串建立一個時間,舉個例子:

let date = new Date('2022-06-22 00:00:00')console.log(date)

程式碼執行結果:

JavaScript日期物件Date(總結分享)

new Date( year, month, date, hours, minutes, sec, ms)

  • year--必須是四位元的數字;
  • month——[0,11]0表示一月;
  • date——當月的某一天,預設為1
  • 1
  • # ;
  • hours/minutes/sec/ms
——預設為0;

舉個栗子:

let date = new Date(2022,6,22,20,35,33)console.log(date)

程式碼執行結果: JavaScript日期物件Date(總結分享)

我們也可以指定毫秒數:
let date = new Date(2022,6,22,20,35,33,777)console.log(date)

Date物件的方法

如果我們有一個Date對象,我們可以透過

Date

物件的內建方法,取得時間的一部分,例如年份、月份、日期等。

取得日期內容

例如我們有日期

date
  1. let date = new Date(2022,5,22,20,35,33)
    getFullYear()取得年份,date.getFullYear()傳回
  2. 2022
  3. ;getMonth()取得月份,date.getMonth( )返回5,也就是
  4. 6
  5. 月;#getDate()取得當月的日期,date.getDate ()返回
  6. 22
  7. ;getDay()取得目前時間在一週的哪一天,date.getDay()返回
  8. 3
;

###注意:###
  • 以上日期都是已于当地日期的,比如我这里是中国的时区
  • 获取年份一定要用getFullYeargetYear会返回两位数的年份

我们也可以获得0时区的时间,也就是UTC时间,分别对应getUTCFullYear()getUTCMonth()getUTCDay等。只需要在get后插入UTC即可。

举个例子:

let date = new Date(2022,5,22,20,35,33)console.log(date.getHours(),date.getUTCHours())

代码执行结果:

JavaScript日期物件Date(總結分享)

夜里也可以看出,中国时区和0时区相差8小时。

  1. getTime()返回日期的时间戳,方法没有UTC模式;
  2. getTimezoneOffset()返回本地时区和0时区相差的时间,以分钟为单位,并且没有UTC模式;

设置日期内容

我们还可以通过Date对象的方法设置日期中的某一部分:

  • setFullYear(year, [month], [date])设置年份(月份、日)
  • setMonth(month, [date])设置月份(日)
  • setDate(date)设置日期(月份的第几天)
  • setHours(hour, [min], [sec], [ms])设置小时(分、秒、毫秒)
  • setMinutes(min, [sec], [ms])设置分钟(秒、毫秒)
  • setSeconds(sec, [ms])设置秒(毫秒)
  • setMilliseconds(ms)设置毫秒
  • setTime(milliseconds)(使用自 1970-01-01 00:00:00 UTC+0 以来的毫秒数来设置整个日期)

以上函数中只有setTime()没有UTC变体。

日期的自动校准

JavaScriptDate具备自动校准功能,这为我们针对时间的计算提供了极大的方便。

例如:

let date = new Date(2022,5,38)//注意这里的38console.log(date)

代码的执行结果:

屏幕截图 2022-06-23 185419

从执行结果我们可以看出"2022年6月38号"并没有使程序出现错误,而是将日期转成了”2022年7月8号“。

以上案例验证了,在JavaScript中,超出范围的日期会被Date对象自动分配。这样我们就可以非常方便的使用Date对象进行日期的计算。

例如,我们可以在日期上对年、月、日进行加减法运算:

let date = new Date(2022,5,23)//当前时间是2022-6-23date.setDate(date.getDate() + 8)//计算八天后的时间console.log(date)

代码执行结果:

JavaScript日期物件Date(總結分享)

同样的,我们也可以使用date.setSeconds()方法已秒为单位计算日期。

日期转为数字、日期差值

日期Date转为数字的结果和使用date.getTime()的返回值相同,都是毫秒为单位的数值:

let date = new Date()console.log(+date)

代码执行结果:

JavaScript日期物件Date(總結分享)

既然时间的本质就是数字,我们也可以进行时间差计算,并且以ms(毫秒)为单位。

例如:

let date1 = new Date(2022,5,23)let date2 = new Date(2022,5,24)console.log(`时间差为${date2-date1}ms`)

代码执行结果为:

JavaScript日期物件Date(總結分享)

Date.now()

如果我们希望获得当前时间,更优的做法是使用Date.now()方法。这个方法会返回当前时间的时间戳,同时不需要创建额外的Date对象,这对内存开销、垃圾回收都是有好处的,而且代码更简洁。

举个栗子:

let begin = Date.now()for(let i = 1;i<p>代码执行结果:</p><p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/067/2e91502ffdbd23d1af26c248feabbead-11.png?x-oss-process=image/resize,p_40" class="lazy" alt="JavaScript日期物件Date(總結分享)"></p><h3 id="Date-parse">Date.parse()</h3><p><code>Date.parse()</code>方法可以读取一个日期字符串,并转为时间戳,但是字符串必须遵守一定的规则:<code>YYYY-MM-DDTHH:mm:ss.sssZ</code>。</p>
  • YYYY-MM-DD对应年-月-日
  • T属于分隔符
  • HH:mm:ss.sss对应时:分:秒.毫秒
  • Z可以是+-hh:mm格式的时区。单个字符Z表示UTC+0

字符串可以使用省略写法,例如:YYYY-MM-DDYYYY-MMYYYY

举个小李子:

let ms = Date.parse('2022-06-23T19:38:30.777+08:00')//时间戳let date = new Date(ms)console.log(date)

代码执行结果:

JavaScript日期物件Date(總結分享)

總結

  1. JavaScript使用Date物件處理時間:new Date();
  2. 月份從0開始計算
  3. Date具有許多實用的方法,我們可以取得時間中的某一段;
  4. Date物件會自動校準,我們可以直接對日期進行加減法;
  5. Date.now()可以高效的取得當前時間;

【相關推薦: javascript影片教學web前端

以上是JavaScript日期物件Date(總結分享)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文轉載於:CSDN。如有侵權,請聯絡admin@php.cn刪除
es6数组怎么去掉重复并且重新排序es6数组怎么去掉重复并且重新排序May 05, 2022 pm 07:08 PM

去掉重复并排序的方法:1、使用“Array.from(new Set(arr))”或者“[…new Set(arr)]”语句,去掉数组中的重复元素,返回去重后的新数组;2、利用sort()对去重数组进行排序,语法“去重数组.sort()”。

JavaScript的Symbol类型、隐藏属性及全局注册表详解JavaScript的Symbol类型、隐藏属性及全局注册表详解Jun 02, 2022 am 11:50 AM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于Symbol类型、隐藏属性及全局注册表的相关问题,包括了Symbol类型的描述、Symbol不会隐式转字符串等问题,下面一起来看一下,希望对大家有帮助。

原来利用纯CSS也能实现文字轮播与图片轮播!原来利用纯CSS也能实现文字轮播与图片轮播!Jun 10, 2022 pm 01:00 PM

怎么制作文字轮播与图片轮播?大家第一想到的是不是利用js,其实利用纯CSS也能实现文字轮播与图片轮播,下面来看看实现方法,希望对大家有所帮助!

JavaScript对象的构造函数和new操作符(实例详解)JavaScript对象的构造函数和new操作符(实例详解)May 10, 2022 pm 06:16 PM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于对象的构造函数和new操作符,构造函数是所有对象的成员方法中,最早被调用的那个,下面一起来看一下吧,希望对大家有帮助。

javascript怎么移除元素点击事件javascript怎么移除元素点击事件Apr 11, 2022 pm 04:51 PM

方法:1、利用“点击元素对象.unbind("click");”方法,该方法可以移除被选元素的事件处理程序;2、利用“点击元素对象.off("click");”方法,该方法可以移除通过on()方法添加的事件处理程序。

JavaScript面向对象详细解析之属性描述符JavaScript面向对象详细解析之属性描述符May 27, 2022 pm 05:29 PM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于面向对象的相关问题,包括了属性描述符、数据描述符、存取描述符等等内容,下面一起来看一下,希望对大家有帮助。

foreach是es6里的吗foreach是es6里的吗May 05, 2022 pm 05:59 PM

foreach不是es6的方法。foreach是es3中一个遍历数组的方法,可以调用数组的每个元素,并将元素传给回调函数进行处理,语法“array.forEach(function(当前元素,索引,数组){...})”;该方法不处理空数组。

整理总结JavaScript常见的BOM操作整理总结JavaScript常见的BOM操作Jun 01, 2022 am 11:43 AM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于BOM操作的相关问题,包括了window对象的常见事件、JavaScript执行机制等等相关内容,下面一起来看一下,希望对大家有帮助。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
3 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )專業的PHP整合開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

EditPlus 中文破解版

EditPlus 中文破解版

體積小,語法高亮,不支援程式碼提示功能

mPDF

mPDF

mPDF是一個PHP庫,可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件,並處理不同的語言。與原始腳本如HTML2FPDF相比,它的速度較慢,並且在使用Unicode字體時產生的檔案較大,但支援CSS樣式等,並進行了大量增強。支援幾乎所有語言,包括RTL(阿拉伯語和希伯來語)和CJK(中日韓)。支援嵌套的區塊級元素(如P、DIV),