眾所周知，JavaScript核心包含Data()建構式，用來創建表示時間和日期的物件，

今天主要跟大家梳理一下，常用的時間、日期處理方法，方便大家使用和理解

格式化時間

老生常談，大概會這么寫

1 2 3 4 5 6 7 8 9 10 11

var format = function (time) { var y = time.getFullYear(); //getFullYear方法以四位數字回傳年份 var M = time.getMonth() + 1; // getMonth方法從 Date 物件回傳月份 (0 ~ 11)，回傳結果需要手動加一 var d = time.getDate(); // getDate方法從 Date 物件回傳一個月中的某一天 (1 ~ 31) var h = time.getHours(); // getHours方法回傳 Date 物件的小時 (0 ~ 23) var m = time.getMinutes(); // getMinutes方法回傳 Date 物件的分鐘 (0 ~ 59) var s = time.getSeconds(); // getSeconds方法回傳 Date 物件的秒數 (0 ~ 59) return y + '-' + M + '-' + d + ' ' + h + ':' + m + ':' + s; } var time1 = format(new Date());

但是有什么問題呢？一般來說小于10的值，要在前面添加字串‘0’的，我們大可以寫個判斷來解決他，但是太麻煩了~

其實可以這樣

1 2 3 4 5 6 7 8

var format = function (time) { var date = new Date(+time + 8 * 3600 * 1000); return date.toJSON().substr(0, 19).replace('T', ' ').replace(/-/g, '.'); } var time1 = format(new Date()); //Date的‘toJSON’方法回傳格林威治時間的JSON格式字串，轉化為北京時間需要額外增加8個時區，然后把‘T’替換為空格，即是我們需要的時間格式，后面可以通過正則將日期分隔符換成任何想要的字符， //一元加運算子可以把任何資料型別轉換成數字，所以獲取時間物件對應毫秒數的另一個方法是+Date或Number(Date)

獲取當月最后一天

一個月可能有28/29/30/31天，使用寫死資料的方式來解決閏年和大小月顯然是不科學的，

1 2 3 4 5 6 7 8

function getLastDayOfMonth (time) { var month = time.getMonth(); time.setMonth(month+1); time.setDate(0); return time.getDate() } getLastDayOfMonth(new Date()) //先月份加一，再取上個月的最后一天

獲取這個季度第一天

用來確定當前季度的開始時間，常用在報表中

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

function getFirstDayOfSeason (time) { var month = time.getMonth(); if(month <3 ){ time.setMonth(0); }else if(2 < month && month < 6){ time.setMonth(3); }else if(5 < month && month < 9){ time.setMonth(6); }else if(8 < month && month < 11){ date.setMonth(9); } time.setDate(1); return time; } getFirstDayOfSeason(new Date()) //先月份加一，再取上個月的最后一天

獲取中文星期

這也是個比較常見的雪球，完全沒必要寫一長串switch啦，直接用charAt來解決，

1	let time ="日一二三四五六".charAt(new Date().getDay());

獲取今天是當年的第幾天

來看看今年自己已經浪費了多少時光~

1 2 3 4

var time1 = Math.ceil(( new Date() - new Date(new Date().getFullYear().toString()))/(24*60*60*1000)); //需要注意的是new Date()不設定具體時間的話new Date(2019)得到的不是0點而是8點 //Tue Jan 01 2019 08:00:00 GMT+0800 (中國標準時間)

獲取今天是當年的第幾周

日歷、表單常用

1 2 3

var week = Math.ceil(((new Date() - new Date(new Date().getFullYear().toString()))/(24*60*60*1000))/7); //在獲取第幾天的基礎上除7，向上取整

 

獲取今天是當年還剩多少天

再來看看今年還有多少天可以浪費~

1 2 3 4 5 6 7 8 9

function restOfYear(time) { var nextyear = (time.getFullYear() + 1).toString(); var lastday = new Date(new Date(nextyear)-1); //獲取本年的最后一毫秒： console.log(lastday) var diff = lastday - time; //毫秒數 return Math.floor(diff / (1000 * 60 * 60 * 24)); } restOfYear(new Data()) //先取下一年第一秒，再減1毫秒，順便思考一下為什么??是Math.ceil，??是Math.floor，

計算兩個時間的間隔

可以拓展為倒計時、有效期等用途

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

function diffTime(startDate,endDate,location) { var diff=new Date(endDate).getTime() - startDate;//時間差的毫秒數 //計算出相差天數 var days=Math.floor(diff/(24*3600*1000)); //計算出小時數 var leave1=diff%(24*3600*1000); //計算天數后剩余的毫秒數 var hours=Math.floor(leave1/(3600*1000)); //計算相差分鐘數 var leave2=leave1%(3600*1000); //計算小時數后剩余的毫秒數 var minutes=Math.floor(leave2/(60*1000)); //計算相差秒數 var leave3=leave2%(60*1000); //計算分鐘數后剩余的毫秒數 var seconds=Math.round(leave3/1000); if(location === "Day") { return returnStr = "還有" + days + "天"; }else if(location === "Hours") { return returnStr = "還有" + (hours+days*24) + "小時"; }else if(location === "Minutes") { return returnStr = "還有" + (minutes+(hours+days*24)*60) + "分鐘"; }else if(location === "Seconds") { return returnStr = "還有" + (seconds+(minutes+(hours+days*24)*60)*60) + "秒"; }else{ return returnStr = "還有" + days + "天" + hours + "小時" + minutes + "分鐘" + seconds + "秒"; } } console.log(diffTime(new Date(), '2019-8-19 16:00:00','Minutes')) //沒有寫的很復雜，方便各位修改拓展，

計算指定時間間隔前后的日期

可用于時間追溯、活動預告等用途

1 2 3 4 5 6

function GetDate(time,count) { time.setDate(time.getDate() + count);//獲取N天后的日期 var date = new Date(+time + 8 * 3600 * 1000); return date.toJSON().substr(0, 19).replace('T', ' ').replace(/-/g, '.'); } GetDate(new Date(),100)

計算當周開始和結束時間

很常見的需求，可用來做簽到等

1 2 3 4 5 6 7 8 9 10 11 12 13

function getwholetWeek(now){ var weekday = now.getDay(); // 獲取當前是周幾（周日：0） weekday = weekday === 0 ? 7 : weekday; var firstDay = GetDate(now,-weekday); //周日開始 var lastDay = GetDate(now,7 - 1); //周六結束 return { firstDay: firstDay, lastDay: lastDay }; } console.log(getwholetWeek(new Date())) //呼叫前面日期間隔函式，可根據情況改成，周一開始，周日結束

 來源：冰山作業室 <style>pre { overflow: auto; padding: 0; font-size: 14px; color: rgba(197, 200, 198, 1); background: rgba(29, 31, 33, 1); line-height: 1.6 } pre, code { font-family: consolas, Menlo, "PingFang SC", "Microsoft YaHei", monospace } code { overflow-wrap: break-word; word-wrap: break-word; padding: 2px 4px; color: rgba(85, 85, 85, 1); background: rgba(238, 238, 238, 1); border-radius: 3px; font-size: 14px } pre { padding: 10px } pre code { padding: 0; color: rgba(197, 200, 198, 1); text-shadow: none } .highlight { border-radius: 1px } .highlight pre { border: none; margin: 0; padding: 10px 0 } .highlight table { margin: 0; width: auto; border: none } .highlight td { border: none; padding: 0 !important } .highlight figcaption { font-size: 1em; color: rgba(197, 200, 198, 1); line-height: 1em; margin: 0; padding: 0.5em; background: rgba(238, 238, 238, 1); border-bottom: 1px solid rgba(233, 233, 233, 1) } .highlight figcaption:before, .highlight figcaption:after { content: " "; display: table } .highlight figcaption:after { clear: both } .highlight figcaption a { float: right; color: rgba(197, 200, 198, 1) } .highlight figcaption a:hover { border-bottom-color: rgba(197, 200, 198, 1) } .highlight .gutter pre { padding-left: 10px; padding-right: 10px; color: rgba(136, 143, 150, 1); text-align: right; background-color: rgba(0, 0, 0, 1) } .highlight .code pre { padding-left: 10px; padding-right: 10px; background-color: rgba(29, 31, 33, 1) } .highlight .line { height: 20px } .gutter { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } .gist table { width: auto } .gist table td { border: none } pre .deletion { background: rgba(128, 0, 0, 1) } pre .addition { background: rgba(0, 128, 0, 1) } pre .meta { color: rgba(178, 148, 187, 1) } pre .comment { color: rgba(150, 152, 150, 1) } pre .variable, pre .attribute, pre .tag, pre .name, pre .regexp, pre .ruby .constant, pre .xml .tag .title, pre .xml .pi, pre .xml .doctype, pre .html .doctype, pre .css .id, pre .css .class, pre .css .pseudo { color: rgba(204, 102, 102, 1) } pre .number, pre .preprocessor, pre .built_in, pre .builtin-name, pre .literal, pre .params, pre .constant, pre .command { color: rgba(222, 147, 95, 1) } pre .ruby .class .title, pre .css .rules .attribute, pre .string, pre .symbol, pre .value, pre .inheritance, pre .header, pre .ruby .symbol, pre .xml .cdata, pre .special, pre .formula { color: rgba(181, 189, 104, 1) } pre .title, pre .css .hexcolor { color: rgba(138, 190, 183, 1) } pre .function, pre .python .decorator, pre .python .title, pre .ruby .function .title, pre .ruby .title .keyword, pre .perl .sub, pre .javascript .title, pre .coffeescript .title { color: rgba(129, 162, 190, 1) } pre .keyword, pre .javascript .function { color: rgba(178, 148, 187, 1) } .posts-expand .post-body img.full-image { border: none } .blockquote-center, .page-home .post-type-quote blockquote, .page-post-detail .post-type-quote blockquote { position: relative; margin: 40px 0; padding: 0; border-left: none; text-align: center } .blockquote-center::before, .page-home .post-type-quote blockquote::before, .page-post-detail .post-type-quote blockquote::before, .blockquote-center::after, .page-home .post-type-quote blockquote::after, .page-post-detail .post-type-quote blockquote::after { position: absolute; content: " "; display: block; width: 100%; height: 24px; opacity: 0.2; background-repeat: no-repeat; background-position: 0 -6px; background-size: 22px 22px } .blockquote-center::before, .page-home .post-type-quote blockquote::before, .page-post-detail .post-type-quote blockquote::before { top: -20px; background-image: url("../images/quote-l.svg"); border-top: 1px solid rgba(204, 204, 204, 1) } .blockquote-center::after, .page-home .post-type-quote blockquote::after, .page-post-detail .post-type-quote blockquote::after { bottom: -20px; background-image: url("../images/quote-r.svg"); border-bottom: 1px solid rgba(204, 204, 204, 1); background-position: 100% 8px } .blockquote-center p, .page-home .post-type-quote blockquote p, .page-post-detail .post-type-quote blockquote p, .blockquote-center div, .page-home .post-type-quote blockquote div, .page-post-detail .post-type-quote blockquote div { text-align: center } .post .post-body .group-picture img { box-sizing: border-box; padding: 0 3px; border: none } .post .group-picture-row { overflow: hidden; margin-top: 6px } .post .group-picture-row:first-child { margin-top: 0 } .post .group-picture-column { float: left } .page-post-detail .post-body .group-picture-column { float: none; margin-top: 10px; width: auto !important } .page-post-detail .post-body .group-picture-column img { margin: 0 auto } .page-archive .group-picture-container { overflow: hidden } .page-archive .group-picture-row { float: left } .page-archive .group-picture-row:first-child { margin-top: 6px } .page-archive .group-picture-column { max-width: 150px; max-height: 150px } .post-body .label { display: inline; padding: 0 2px } .post-body .label.default { background-color: rgba(240, 240, 240, 1) } .post-body .label.primary { background-color: rgba(239, 230, 247, 1) } .post-body .label.info { background-color: rgba(229, 242, 248, 1) } .post-body .label.success { background-color: rgba(231, 244, 233, 1) } .post-body .label.warning { background-color: rgba(252, 246, 225, 1) } .post-body .label.danger { background-color: rgba(250, 232, 235, 1) } .post-body .note { position: relative; padding: 15px; margin-bottom: 20px; border-top: 1px solid rgba(238, 238, 238, 1); border-right: 1px solid rgba(238, 238, 238, 1); border-bottom: 1px solid rgba(238, 238, 238, 1); border-left: 5px solid rgba(238, 238, 238, 1); border-radius: 3px } .post-body .note h2, .post-body .note h3, .post-body .note h4, .post-body .note h5, .post-body .note h6 { margin-top: 0; margin-bottom: 0; padding-top: 0 !important } .post-body .note p:first-child, .post-body .note ul:first-child, .post-body .note ol:first-child, .post-body .note table:first-child, .post-body .note pre:first-child, .post-body .note blockquote:first-child { margin-top: 0 } .post-body .note p:last-child, .post-body .note ul:last-child, .post-body .note ol:last-child, .post-body .note table:last-child, .post-body .note pre:last-child, .post-body .note blockquote:last-child { margin-bottom: 0 } .post-body .note.default { border-left-color: rgba(119, 119, 119, 1) } .post-body .note.default h2, .post-body .note.default h3, .post-body .note.default h4, .post-body .note.default h5, .post-body .note.default h6 { color: rgba(119, 119, 119, 1) } .post-body .note.primary { border-left-color: rgba(111, 66, 193, 1) } .post-body .note.primary h2, .post-body .note.primary h3, .post-body .note.primary h4, .post-body .note.primary h5, .post-body .note.primary h6 { color: rgba(111, 66, 193, 1) } .post-body .note.info { border-left-color: rgba(66, 139, 202, 1) } .post-body .note.info h2, .post-body .note.info h3, .post-body .note.info h4, .post-body .note.info h5, .post-body .note.info h6 { color: rgba(66, 139, 202, 1) } .post-body .note.success { border-left-color: rgba(92, 184, 92, 1) } .post-body .note.success h2, .post-body .note.success h3, .post-body .note.success h4, .post-body .note.success h5, .post-body .note.success h6 { color: rgba(92, 184, 92, 1) } .post-body .note.warning { border-left-color: rgba(240, 173, 78, 1) } .post-body .note.warning h2, .post-body .note.warning h3, .post-body .note.warning h4, .post-body .note.warning h5, .post-body .note.warning h6 { color: rgba(240, 173, 78, 1) } .post-body .note.danger { border-left-color: rgba(217, 83, 79, 1) } .post-body .note.danger h2, .post-body .note.danger h3, .post-body .note.danger h4, .post-body .note.danger h5, .post-body .note.danger h6 { color: rgba(217, 83, 79, 1) } .post-body .tabs { position: relative; display: block; margin-bottom: 20px; padding-top: 10px } .post-body .tabs ul.nav-tabs { margin: 0 0 -1px; padding: 0; display: flex }</style>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/175417.html

標籤：JavaScript

上一篇：哪種方式更適合在React中獲取資料？

下一篇：vue動態回圈出的多個select出現過的變為disabled