共計(jì) 4278 個(gè)字符，預(yù)計(jì)需要花費(fèi) 11 分鐘才能閱讀完成。
Javascript 中如何使用 Date 對(duì)象，相信很多沒(méi)有經(jīng)驗(yàn)的人對(duì)此束手無(wú)策，為此本文總結(jié)了問(wèn)題出現(xiàn)的原因和解決方法，通過(guò)這篇文章希望你能解決這個(gè)問(wèn)題。
一、Date 對(duì)象是什么
Date 對(duì)象用于處理日期和時(shí)間，一個(gè)日期格式化的對(duì)象，
創(chuàng)建一個(gè) Date 對(duì)象可以直接使用 new Date()，
括號(hào)里可以傳入一個(gè)時(shí)間的格式，就像這樣
new Date(month,dd,yyyy hh:mm:ss
new Date(yyyy,month,dd hh:mm:ss
new Date(month,dd,yyyy
new Date(yyyy,month,dd,hh,mm,ss);
new Date(yyyy,month,dd);
new Date(ms);
在這里，我們按 F12 打開(kāi)控制臺(tái) (找到 Console)，然后輸入：console.log(new Date()) 它會(huì)返回一個(gè)當(dāng)前的時(shí)間，如下圖所示：
二、Date 對(duì)象里的常用方法
在這里可以先 let date = new Date()，然后就可以開(kāi)始調(diào)用 Date 對(duì)象中的方法了，這些步驟都可以按 F12 打開(kāi)控制臺(tái)進(jìn)行調(diào)試
date.getFullYear()
從 Date 對(duì)象以四位數(shù)字返回年份
date.getMonth()
從 Date 對(duì)象返回月份 (0 ~ 11)
(在這先說(shuō)明一下，獲取當(dāng)前月份一定要在這個(gè)基礎(chǔ)上 +1，不然月份就會(huì)少一個(gè)月)
date.getDay()
從 Date 對(duì)象返回一周中的某一天 (0 ~ 6)
date.getDate()
從 Date 對(duì)象返回一個(gè)月中的某一天 (1 ~ 31)
date.getHours()
返回 Date 對(duì)象的小時(shí) (0 ~ 23)
date.getMinutes()
返回 Date 對(duì)象的分鐘 (0 ~ 59)
date.getSeconds()
返回 Date 對(duì)象的秒數(shù) (0 ~ 59)
date.getMilliseconds()
返回 Date 對(duì)象的毫秒 (0 ~ 999)
date.getTime()
返回 1970 年 1 月 1 日至今的毫秒數(shù)
有了以上的知識(shí)，然后我們就可以開(kāi)始寫一個(gè)獲取當(dāng)前時(shí)間的函數(shù)了
三、獲取當(dāng)前時(shí)間的函數(shù)
function currentTime() {
let date = new Date();
// 獲取年份
let year = date.getFullYear();
// 獲取月份
let getMonth = date.getMonth() + 1;
let month = getMonth 10 ? 0 + getMonth : getMonth;
// 獲取當(dāng)前日期號(hào)
let day = date.getDate() 10 ? 0 + date.getDate() : date.getDate();
// 獲取小時(shí)
let hour = date.getHours() 10 ? 0 + date.getHours() : date.getHours();
// 獲取分鐘
let minute = date.getMinutes() 10 ? 0 + date.getMinutes() : date.getMinutes();
// 獲取秒數(shù)
let second = date.getSeconds() 10 ? 0 + date.getSeconds() : date.getSeconds();
// 最后返回一個(gè)當(dāng)前的時(shí)間格式
return `${year}-${month}-${day} ${hour}:${minute}:${second}`
}
記得在 date.getMonth() 的基礎(chǔ)上加回 1 得到準(zhǔn)確的月份，在獲取月份，日期，小時(shí)，分鐘，秒數(shù)的時(shí)候要做下判斷，如果它們?cè)?0 到 9 之間，要在前面拼接一個(gè) 0，不然時(shí)間格式就會(huì)像這樣：2020/5/19 12:37:5，它并不好看。最后 return 的模板字面量是 ES6 的語(yǔ)法，也可以換成字符串拼接的格式，然后我們就直接調(diào)用這個(gè)函數(shù) console.log(currentTime())，便可獲得這樣的一個(gè)時(shí)間 2020-05-19 12:37:05，當(dāng)然，里面的時(shí)間格式你們可以自行修改，比如 2020/05/19 12:37:05，看你自己個(gè)人喜好。
然后我們開(kāi)始進(jìn)入正題????
四、開(kāi)始封裝一個(gè)日期倒計(jì)時(shí)的函數(shù)
//format 傳入一個(gè)結(jié)束日期的時(shí)間
function endTime(format) {
let date = new Date();
// 獲取當(dāng)前時(shí)間的毫秒數(shù)
let now = date.getTime();
// 結(jié)束日期
let endDate = new Date(format);
// 獲取結(jié)束日期的毫秒數(shù)
let end = endDate.getTime();
/* 剩余的時(shí)間 = 結(jié)束的時(shí)間 - 當(dāng)前時(shí)間，
毫秒數(shù)再除以 1000 獲得秒數(shù) */
let leftTime = (end – now) / 1000;
// 如果剩余時(shí)間大于 0，開(kāi)始做判斷
if (leftTime = 0) {
//Math.floor(向下取整)
/* 剩余時(shí)間的秒數(shù)除以 60 得到分鐘數(shù)，
再除以 60 得到小時(shí)數(shù)，
再除以 24 獲得天數(shù) */
let day = Math.floor(leftTime / 60 / 60 / 24);
/* 獲取小時(shí)數(shù)要做取余處理，
不夠一天，那么余下的時(shí)間就是小時(shí)數(shù)，
獲取分鐘數(shù)，秒數(shù)也都是同理
*/
let hour = Math.floor(leftTime / 60 / 60 % 24);
let minute = Math.floor(leftTime / 60 % 60);
let second = Math.floor(leftTime % 60);
// 最后輸出的時(shí)間格式按喜好轉(zhuǎn)換
return `${day} 天 ${hour} 小時(shí) ${minute} 分 ${second} 秒 `;
} else {
// 時(shí)間過(guò)了
alert(時(shí)間已過(guò))
}
}
至此，你理解了如何封裝這兩個(gè)函數(shù)了嗎？
五、進(jìn)行測(cè)試 Demo
然后，我們就開(kāi)始寫一個(gè) demo 到網(wǎng)頁(yè)中，來(lái)測(cè)試一下我們的成果，此段代碼可直接復(fù)制到你們的編譯器去食用
!DOCTYPE html
html
head
meta charset= UTF-8
meta name= viewport content= width=device-width
title 倒計(jì)時(shí) demo /title
style
body {
/* background: url(1.gif) no-repeat; 背景圖，可以自行添加 */
background-size: 100% 100%;
background-attachment: fixed;
min-width: 960px;
}
.container {
margin-top: 20px;
margin-left: 150px;
}
/style
/head
body
div
div
h2 /h2
/div
h3 /h3
h3 /h3
/div
/body
script
let format = 2020-09-01 00:00:00
let title = 距離: + format + 還有
document.querySelector(.title).innerHTML = title
setInterval(() = {
document.querySelector(.currentTime).innerHTML = 當(dāng)前時(shí)間: + currentTime();
document.querySelector(.endTime).innerHTML = endTime(format);
});
function currentTime() {
let date = new Date();
let year = date.getFullYear();
let getMonth = date.getMonth() + 1;
let month = getMonth 10 ? 0 + getMonth : getMonth;
let day = date.getDate() 10 ? 0 + date.getDate() : date.getDate();
let hour = date.getHours() 10 ? 0 + date.getHours() : date.getHours();
let minute = date.getMinutes() 10 ? 0 + date.getMinutes() : date.getMinutes();
let second = date.getSeconds() 10 ? 0 + date.getSeconds() : date.getSeconds();
return `${year}-${month}-${day} ${hour}:${minute}:${second}`
}
console.log(currentTime())
function endTime(format) {
let date = new Date();
let now = date.getTime();
let endDate = new Date(format);
let end = endDate.getTime();
let leftTime = (end – now) / 1000;
if (leftTime = 0) {
let day = Math.floor(leftTime / 60 / 60 / 24);
let hour = Math.floor(leftTime / 60 / 60 % 24);
let minute = Math.floor(leftTime / 60 % 60);
let second = Math.floor(leftTime % 60);
return `${day} 天 ${hour} 小時(shí) ${minute} 分 ${second} 秒 `;
} else {
alert(時(shí)間已過(guò))
}
}
/script
/html
六、介紹時(shí)間類庫(kù)
一個(gè)很好用的 JavaScript 日期處理類庫(kù) Moment.js，可以用來(lái)處理各種時(shí)間樣式，附上使用方式
有了這個(gè)類庫(kù)之后就如虎添翼了，讓你處理時(shí)間更加的簡(jiǎn)單快捷方便
附上文檔地址 http://momentjs.cn/
具體使用方式可參考文檔
安裝:
npm install moment –save
yarn add moment
瀏覽器安裝:
script src= moment.js /script
script
moment().format();
/script
看完上述內(nèi)容，你們掌握 Javascript 中如何使用 Date 對(duì)象的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注丸趣 TV 行業(yè)資訊頻道，感謝各位的閱讀！
