大同市建設工程招標投標網站b2b電商平臺
??
很高興我們能夠通過不同空間，不同時間，通過這篇博客相識，那一定是一種緣分，一種你和狗哥的緣分。今天我希望通過這篇博客對我所熟知的前端世界里的日期時間做一個匯總，不止是代碼上的匯總哦！
目錄
一、時區(qū)
1. 時區(qū)產生的原因?
2. 本初子午線
3. 日不落帝國
二、不同時區(qū)電腦上的時間顯示
1. 相同的時間戳
2. 不同時區(qū)的時差造成的問題?
三、 JS中常用的日期時間方法
1. 年月日時分秒?
2. 展示中文星期?
3. 今年是平年還是閏年
4. 時間格式的兼容性?
四、前端項目常用的日期時間處理庫
1. moment庫
2. 其他時間轉換庫?
五、前端時間日期組件庫
1. EXTJS
2. easyui
3.? elementui
4. 其他
六、做為開發(fā)對于時間的思考
一、時區(qū)
在說開發(fā)世界里的日期之前，我們必須了解一下所謂的時區(qū)。正因為時區(qū)的不同，我們和世界上其他時區(qū)的人們可能看見的時間也不同。?
1. 時區(qū)產生的原因?
當我們半夜12點終于快要加班熬不住的時候，印尼人民說都11點了，我都睡醒一覺了，倫敦同事感覺下午才4點，還要等一等才下班。所以如果每個國家和地區(qū)都采用他們當地的時間標準，那會給我們的生活帶來很多不便，而這種世界性痛點就交給了天文學家，他們商量出的解決方案就很好：將地球的經度每隔15度劃分一個區(qū)域，于是劃分出了24個時區(qū)，大家都采用相同的時間標準，也就是所謂的時區(qū)。
2. 本初子午線
（不知道袁本初的名字跟這個本初子午線是不是有關系）地球上每隔經度15度做為一個時區(qū)，幾乎也就是太陽每隔一小時走過的經度。這樣一天24小時，正好被劃分為24個時區(qū)。各時區(qū)的“中央經線”規(guī)定為0°，即本初子午線；東西經15°、東西經30°、東西經45°……直到180°經線，在每條中央經線東西兩側各7.5°范圍內的所有地點，一律使用該中央經線的地方時作為標準時刻?！皡^(qū)時系統(tǒng)”在很大程度上解決了各地時刻的混亂現象，使得世界上只有24種不同時刻存在， 而且由于相鄰時區(qū)間的時差恰好為1個小時，這樣各不同時區(qū)間的時刻換算變得極為簡單。因此，一百年來，世界各地仍沿用這種區(qū)時系統(tǒng)。
3. 日不落帝國
天空的霧來得漫不經心
河水像油畫一樣安靜
和平鴿慵懶步伐押著韻
心偷偷的放晴
祈禱你像英勇的禁衛(wèi)軍
動也不動的守護愛情
你在回憶里留下的腳印
是我愛的風景
我要送你 日不落的想念
寄出代表愛的明信片
你是否記得這首蔡依林的《日不落》，MV就是在倫敦拍的。所以給大多數人的感覺日不落帝國說的就是英國?！叭詹宦涞蹏弊钤缭从谖靼嘌绹蹩逅挂皇赖恼Z錄：在朕的國土上，太陽永不落下。由于最早的航海發(fā)展和殖民統(tǒng)治，最早的日不落帝國當屬西班牙。
二、不同時區(qū)電腦上的時間顯示
既然中國當前是下午2023年2月21日8點，印尼時間是2023年2月21日7點，那么他們怎么把不同的時間展示到網頁上的呢？
1. 相同的時間戳
在前端開發(fā)中，不同時區(qū)可能顯示的日期時間是不同的，但有一點，同一時刻，他們的時間戳是相同的。比如同一時刻獲取時間戳的方法可以以下幾種：
// 1 Date.now()
console.log(Date.now())// 2 Date.parse()
Date.parse(new Date())// 3 valueOf()
(new Date()).valueOf()// 4 getTime()
new Date().getTime()// 5 Number
Number(new Date())2. 不同時區(qū)的時差造成的問題?
其實不同時區(qū)因為時間上造成的問題主要是客戶端，例如瀏覽器端造成的。比如我們有一個場景，有一個平臺要做出海業(yè)務，C端用戶平臺在泰國，但可恨的是配置管理平臺在中國。而泰國時間晚上12點要促銷，開始降價，但中國的運營人員呢，就從本地瀏覽器選擇了12點，然后提交了商品信息，滿意的以為12點要開始促銷了，泰國的用戶要開始搶購一空了。但等到了運營人員以為的12點，其實泰國人家才11點。原本等著泰國到了12點開始秒殺也還行，但偏偏這個平臺中國也能訪問，結果主要給泰國人民準備的好貨，還沒到時間呢，被中國人秒了。
所以這個時候前端給服務端的接口提供的入參就不能是純日期時間格式了，例如這樣：
fetch(url, {// data: '2023-02-12 00:00:00' // 這樣存到服務器還是12點data: 1676963491162 // 這里應該入參是個時間戳
})而前端用戶界面再展示的時候呢，需要從服務端獲取保存的時間戳，再獲取當前的時區(qū)，就可以正確顯示啦，代碼如下：
// 獲取當前時區(qū)
var timeZone = new Date().getTimezoneOffset() / -60;
// 根據時區(qū)獲取當前時間顯示
function ShowTime(zone){var time = new Date(); // 獲取格林威治時間再乘以60000就是本地時間的偏移量時間var offsetDateTime = new Date().getTimezoneOffset() * 60000;// 獲取格林威治時間 var utcTime = time.getTime() + offsetDateTime;// 拿格林威治時間去反推指定地區(qū)時間 var newTime = utcTime + (3600000 * zone);var returnTime = new Date(newTime);return returnTime;
},
ShowTime(timeZone)三、 JS中常用的日期時間方法
日期時間可以說是開發(fā)中比較常用的一個知識點，平均大概一個星期左右就會碰到一次類似的需求。而一些簡單的日期時間需求呢，使用最基礎的API就足以搞定啦。
1. 年月日時分秒?
初學前端開發(fā)必須要掌握的幾個關于日期時間的API，大概就是獲取年月日時分秒，以及一些相關的周邊知識。例如
| var date = new Date() | 定義一個日期時間對象 |
| var dateStamp = date.getTime() | 獲取毫秒數（或者叫時間戳也行） |
| var year = date.getFullYear() | 獲取年份，4位數 |
| var month = date.getMonth() | 獲取月份，0-11，所以真實情況應該加1 |
| var day = date.getDate() | 獲取日，1-31 |
| var hour = date.getHours() | 獲取小時，0-23 |
| var minutes = date.getMinutes() | 獲取分鐘，0-59 |
| var seconds = date.getSeconds() | 獲取秒數，0-59 |
| var week = date.getDay() | 獲取星期，0-6 |
所以以上月份，小時，分鐘，秒數，如果在真實需求中，要求數值不足10的時候，前面要補0.
var hour = date.getHours();
hour = (hour < 10) ? '0'+hour : hour;2. 展示中文星期?
比如我們明明知道獲取星期的API返回的是0-6，但真實要顯示的卻是 星期一 星期二 星期日這樣，所以就需要多定義一個支持星期的數組變量，代碼如下：
var chineseWeek = ['日', '一', '二', '三', '四', '五', '六'];
var weekDay = date.getDay();
var weekShow = `星期${chineseWeek[weekDay]}`;3. 今年是平年還是閏年
我記得有個口訣是4年一潤，百年不潤，400年又一潤。所以判斷代碼就是
if(year % 4 == 0 && year % 100 != 0 || year % 400 ==0){console.log(year+"是閏年")
}else{console.log(year+"是平年")
}
4. 時間格式的兼容性?
如果服務端給我們返回了‘2023-03-05’這樣的日期，如果我們想通過 new Date(time)的方式初始化日期，在IOS或者safari上很可能會出現異常情況，所以在new Date()初始化之前應該對日期格式做一個統(tǒng)一的處理，也就是如下代碼段：
var time = '2023-05-04';
time = time.replace(/-/g, '/');
// 轉換為2023/05/04的格式較好其實我記得之前還在用jquery的時候，不想用easyui，公司的需求要求支持每年的節(jié)假日，所以我就自己寫了一個，還有好多時間相關的轉換，我都在里面手寫了。比如今天是今年的第幾周，這個月第一天是周幾之類的，感興趣的可以去看看這個9年前的古董支持每年法定節(jié)假日的日歷。
四、前端項目常用的日期時間處理庫
其實我們做項目嘛，大多數時候還是拷過來，拷過去，想想其實也挺沒意思的，但是又想到你CV的過程中，慢慢的，慢慢的就到了發(fā)工資的時間，也就沒有那么無趣了。事實證明，人世間各種你不情我不愿，但只要給錢，我就可。
1. moment庫
moment庫支持html文檔中標簽引入，你也可以通過npm 安裝，使用也很方便，而我們最常用的恐怕就是format格式處理了。上手容易，使用簡單，大家可以試一試
let time1 = moment().format("YYYY-MM-DD");
let now = moment(new Date()).format("YYYY-MM-DD HH:mm:ss");
2. 其他時間轉換庫?
?DayJs??安裝 · Day.js (gitee.io)
ms? 使用鏈接：vercel/ms: Tiny millisecond conversion utility (github.com)
其實日常工作中，還是推薦moment庫。
五、前端時間日期組件庫
組件庫大家都很熟悉吧，過年回家，你搞你的組件庫并不能給你帶來任何實質性作用，朋友們兜里掏出一大把錢吃喝玩樂，你默默的在家里擺弄你的破組件庫。親戚朋友吃飯問你收獲了什么，你說我封裝了一套高性能的組件庫，親戚們懵逼了，你還在心里默默嘲笑他們，笑他們不懂你的高內聚，不懂你的低耦合，也笑他們連web項目怎么搭建的都不知道。你父母的同事都在說自己的子女一年的收獲，兒子買了個房，女兒買了個車，姑娘升職加薪了，你的父母默默無言，說我的兒子封裝了個組件庫，跑起來電腦咔咔響、家里電表走得越來越快了
1. EXTJS
你說好好的，他就付費了，我本想找個EXTJS的日歷組件截個圖，但是沒找到，給大家看看今天才長出來的香蕉吧
?
2. easyui
以我們現在看，樣式是不是有點單薄，模樣是不是差了那么點意思，但曾幾何時，這可是陪伴了大家很久很久的一個非常完美的日歷組件。
3.? elementui
?
?現在很多人已經養(yǎng)成習慣了，凡是用vue開發(fā)，我就要上elementUI,不用這個第三方框架我就不開心，哎，好好的團隊現在也不是怎么樣了，好久不更新了，問題也沒人解決了，你們倒是留下一個維護的人啊。
4. 其他
其他的也很重要，還有好多，就不一一列舉了，Ant Design，DatePicker，Bootstrap，layui，My97DatePicker等等吧，好亂。
六、做為開發(fā)對于時間的思考
?有些人死了不是真的死了，一直到這個世上最后一個還記得他的人死了才是真的死了；一個作家死了不是真的死了，他的思想他的作品還一直流傳著；而我們一年年辛苦奮斗著，一天天代碼敲著，隨著歲月的流逝，我們可以留下點什么呢？