Javascript中如何使用Date對象

Javascript中如何使用Date對象，相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。

創新互聯建站擁有一支富有激情的企業網站制作團隊，在互聯網網站建設行業深耕10多年，專業且經驗豐富。10多年網站優化營銷經驗，我們已為上1000家中小企業提供了成都網站建設、網站設計解決方案，按需求定制網站，設計滿意，售后服務無憂。所有客戶皆提供一年免費網站維護!

一、Date對象是什么

Date 對象用于處理日期和時間，一個日期格式化的對象，

創建一個Date對象可以直接使用new Date()，

括號里可以傳入一個時間的格式，就像這樣

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打開控制臺(找到Console)，然后輸入：console.log(new Date()) 它會返回一個當前的時間，如下圖所示：

二、Date對象里的常用方法

在這里可以先let date = new Date()，然后就可以開始調用Date對象中的方法了，這些步驟都可以按F12打開控制臺進行調試

date.getFullYear()

從 Date 對象以四位數字返回年份

date.getMonth()

從 Date 對象返回月份 (0 ~ 11)

(在這先說明一下，獲取當前月份一定要在這個基礎上+1，不然月份就會少一個月)

date.getDay()

從 Date 對象返回一周中的某一天 (0 ~ 6)

date.getDate()

從 Date 對象返回一個月中的某一天 (1 ~ 31)

date.getHours()

返回 Date 對象的小時 (0 ~ 23)

date.getMinutes()

返回 Date 對象的分鐘 (0 ~ 59)

date.getSeconds()

返回 Date 對象的秒數 (0 ~ 59)

date.getMilliseconds()

返回 Date 對象的毫秒(0 ~ 999)

date.getTime()

返回 1970 年 1 月 1 日至今的毫秒數

有了以上的知識，然后我們就可以開始寫一個獲取當前時間的函數了

三、獲取當前時間的函數

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}`

}

記得在date.getMonth()的基礎上加回1得到準確的月份，在獲取月份，日期，小時，分鐘，秒數的時候要做下判斷，如果它們在0到9之間，要在前面拼接一個0，不然時間格式就會像這樣：2020/5/19 12:37:5，它并不好看。最后return的模板字面量是ES6的語法，也可以換成字符串拼接的格式，然后我們就直接調用這個函數console.log(currentTime())，便可獲得這樣的一個時間2020-05-19 12:37:05，當然，里面的時間格式你們可以自行修改，比如2020/05/19 12:37:05，看你自己個人喜好。

然后我們開始進入正題????

四、開始封裝一個日期倒計時的函數

//format傳入一個結束日期的時間

function endTime(format) {

let date = new Date();

//獲取當前時間的毫秒數

let now = date.getTime();

//結束日期

let endDate = new Date(format);

//獲取結束日期的毫秒數

let end = endDate.getTime();

/*剩余的時間=結束的時間-當前時間，

毫秒數再除以1000獲得秒數*/

let leftTime = (end - now) / 1000;

//如果剩余時間大于0，開始做判斷

if (leftTime >= 0) {

//Math.floor(向下取整)

/*剩余時間的秒數除以60得到分鐘數，

再除以60得到小時數，

再除以24獲得天數*/

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}小時${minute}分${second}秒`;

} else {

//時間過了

alert('時間已過')

}

至此，你理解了如何封裝這兩個函數了嗎？

五、進行測試Demo

然后，我們就開始寫一個demo到網頁中，來測試一下我們的成果，此段代碼可直接復制到你們的編譯器去食用

<!DOCTYPE html>

<html>

<head>

<title>倒計時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>

</div>

</body>

let format = "2020-09-01 00:00:00 "

let title = '距離:' + format + '還有'

document.querySelector('.title').innerHTML = title

setInterval(() => {

document.querySelector('.currentTime').innerHTML = '當前時間:' + 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}小時${minute}分${second}秒`;

} else {

alert('時間已過')

}

</script>

</html>

六、介紹時間類庫

一個很好用的JavaScript 日期處理類庫Moment.js，可以用來處理各種時間樣式，附上使用方式

有了這個類庫之后就如虎添翼了，讓你處理時間更加的簡單快捷方便

附上文檔地址http://momentjs.cn/

具體使用方式可參考文檔

安裝:

npm install moment --save

yarn add moment

瀏覽器安裝:

moment().format();

</script>

看完上述內容，你們掌握Javascript中如何使用Date對象的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注創新互聯行業資訊頻道，感謝各位的閱讀！

分享名稱：Javascript中如何使用Date對象
路徑分享：http://www.yijiale78.com/article28/jsphcp.html

成都網站建設公司_創新互聯，為您提供定制開發、手機網站建設、品牌網站制作、域名注冊、網頁設計公司、網站設計

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創新互聯

猜你還喜歡下面的內容

99偷拍视频精品区一区二,口述久久久久久久久久久久,国产精品夫妇激情啪发布,成人永久免费网站在线观看,国产精品高清免费在线,青青草在线观看视频观看,久久久久久国产一区,天天婷婷久久18禁,日韩动漫av在线播放直播

Javascript中如何使用Date對象