前端開發(fā)中，處理時間戳是一個常見的任務(wù),原生的JavaScript日期對象在處理時間戳?xí)r存在一些痛點，開發(fā)者們就在不斷地尋找更簡便、更有效的方法來管理和操作時間戳。而Day.js，正是一個為此問題而生的解決方案。

前端處理時間戳的痛點

1. 瀏覽器兼容問題：不同的瀏覽器對于時間戳的處理方式可能不同，這使得開發(fā)者需要在各種瀏覽器中進(jìn)行調(diào)試和適配。
2. 復(fù)雜的時間處理方式：JavaScript原生對于時間操作的支持并不直觀，需要進(jìn)行大量的計算和轉(zhuǎn)換才能完成一些基本的日期和時間操作。
3. 性能問題：大量的日期和時間操作可能會影響網(wǎng)頁的性能，導(dǎo)致用戶界面的響應(yīng)速度變慢。

為了解決這些問題，Day.js應(yīng)運(yùn)而生。Day.js是一個輕量級的JavaScript日期庫，它提供了簡單、靈活和易于使用的API，解決了前端處理時間戳的痛點。

Day.js的優(yōu)勢

1. 體積小巧，加載速度快：Day.js 的核心庫只有約1KB大小，可以快速加載到頁面中，不會增加頁面的負(fù)擔(dān)。
2. 功能全面：Day.js 提供了全面的日期和時間操作功能，包括日期的加減、比較、解析和格式化等操作。
3. 使用方便：Day.js 的API設(shè)計得非常簡潔易懂，開發(fā)者可以很容易地使用它來進(jìn)行日期和時間的操作。

安裝和使用

使用Day.js非常簡單。首先，我們需要安裝：

npm install dayjs

下面是使用的例子：

// 引入
import dayjs from 'dayjs'
// 輸出當(dāng)前日期和時間
const now = dayjs()
console.log(now) 
// 輸出當(dāng)前日期的格式化結(jié)果，例如：2023-11-14
const formattedDate = dayjs().format('YYYY-MM-DD')
console.log(formattedDate)
// 輸出當(dāng)前時間的時間戳，以毫秒為單位
const timestamp = dayjs().valueOf()
console.log(timestamp)
// 輸出明天的日期和時間
const tomorrow = dayjs().add(1, 'day')
console.log(tomorrow)
// 輸出一個布爾值，表示給定日期是否在當(dāng)前日期之后
const isAfter = dayjs('2023-11-15').isAfter(dayjs())
console.log(isAfter) 

總結(jié)起來，Day.js是一個輕量級、簡單易用且功能強(qiáng)大的JavaScript日期庫，它解決了前端處理時間戳的痛點。通過提供簡潔的API和豐富的功能，Day.js使得處理日期和時間變得簡單而直觀。如果在前端開發(fā)中需要處理時間戳，不妨嘗試使用Day.js來提升開發(fā)效率和用戶體驗。

.什么是時間戳？

時間戳是字符或編碼信息的序列，用于標(biāo)識何時發(fā)生特定事件，通常給出日期和時間，有時精確到幾分之一秒。 該術(shù)語源自辦公室中使用的橡皮圖章，用于在紙質(zhì)文檔上用墨水在當(dāng)前日期和時間上加蓋戳記，以記錄接收文檔的時間。 此類時間戳的常見用例是在紙質(zhì)信件上的郵戳或考勤打卡紙上的“入”和“出”時間。在現(xiàn)代，該術(shù)語的使用已擴(kuò)展為指附加到數(shù)字?jǐn)?shù)據(jù)的數(shù)字日期和時間信息。 例如，計算機(jī)文件包含時間戳，該時間戳指示文件的最后修改時間，數(shù)碼相機(jī)將時間戳添加到所拍攝的照片中，記錄拍攝日期和時間。

對于電子商務(wù)應(yīng)用，如電子合同簽署、電子文檔簽名等，都需要一個能證明合同簽署時間和文檔簽名時間的可信證明，但是由于用戶桌面電腦或手機(jī)或者服務(wù)器時間是可以隨意修改的，如果簽署合同和文檔時用這些不可信的時間，則無法保證合同的簽署時間可信。因此合同簽署和文檔簽名需要一個權(quán)威第三方來提供可信賴的且不可抵賴的時間戳服務(wù)。

2.密信時間戳服務(wù)工作原理

密信（MeSign）App提供的電子文檔數(shù)字簽名服務(wù)免費為用戶配套提供Adobe全球信任的時間戳服務(wù)，密信時間戳服務(wù)符合RFC3161國際標(biāo)準(zhǔn)和相應(yīng)的國家標(biāo)準(zhǔn)。時間戳服務(wù)就是將經(jīng)過時間戳服務(wù)器簽名的一個可信賴的日期和時間與特定電子數(shù)據(jù)綁定在一起，為PDF簽名應(yīng)用提供可信的時間證明。 其工作原理示意圖如下左圖所示，用戶對待簽名文件生成摘要數(shù)據(jù)，并把此數(shù)據(jù)提交給時間戳服務(wù)器請求簽名，時間戳服務(wù)器對摘要數(shù)據(jù)和一個

來自權(quán)威時間源的一個日期/時間記錄進(jìn)行簽名，生成時間戳簽名數(shù)據(jù)返回給簽名工具，簽名工具把此時間戳數(shù)據(jù)寫入到待簽名的PDF文件即完成時間戳簽名。密信時間戳服務(wù)時間源來自國家授時中心可靠計時系統(tǒng)。

用戶在使用密信App的電子簽名服務(wù)數(shù)字簽名文檔和簽署電子合同時，密信App自動調(diào)用密信時間戳服務(wù)并自動把時間戳簽名數(shù)據(jù)同文件簽名數(shù)據(jù)和LTV數(shù)據(jù)一起按照國際標(biāo)準(zhǔn)寫入到待簽名的PDF文件中完成PDF文件數(shù)字簽名。用戶無需手動配置時間戳服務(wù)網(wǎng)址，無需另外花錢購買時間戳服務(wù)，使用密信App完成數(shù)字簽名的時間戳服務(wù)完全免費和完全全自動。

3.使用密信App簽名的文檔的時間戳是什么樣的？

如下左圖所示，使用密信（MeSign）App簽名的文檔使用Adobe閱讀器打開后顯示的詳細(xì)時間戳信息，顯示時間戳頒發(fā)機(jī)構(gòu)為 MeSign Time Stamping Signer。如下中圖所示，Adobe閱讀器顯示的簽名有效性小結(jié)信息，顯示“簽名包含嵌入的時間戳”和“安全時間戳?xí)r間已驗證”，表明此文檔采用了Adobe全球信任的時間戳服務(wù)。如下右圖所示，點擊Adobe閱讀器左邊的簽名圖標(biāo)也會顯示此簽名包含嵌入的時間戳。

為了確保所有已簽名PDF文件的時間戳簽名全球信任和國密合規(guī)，密信技術(shù)獨創(chuàng)了雙算法證書雙時間戳簽名技術(shù)，自動對待簽名的同一個PDF文件用RSA和SM2算法計算兩份摘要(HASH)數(shù)據(jù)，并分別用RSA時間戳證書和SM2時間戳證書實現(xiàn)雙時間戳簽名，再把這兩個時間戳簽名數(shù)據(jù)寫入到PDF文件中，完成雙證書雙時間戳簽名，確保用戶使用Adobe閱讀器顯示RSA時間戳簽名信息和國密閱讀器顯示國密時間戳簽名信息，只有這樣，才能真正滿足Adobe全球信任和國密合規(guī)的雙標(biāo)準(zhǔn)要求，才能真正實現(xiàn)已簽署合同和文件的全球范圍具有法律效力。

使用Adobe閱讀器打開上面已下載的已簽名樣板文件，查看時間戳簽名信息和顯示的效果如下左圖所示。而使用支持國密算法的 密信閱讀器(內(nèi)測版)打開此文件，查看時間戳簽名信息和顯示的效果如下圖右圖所示。從這個樣板文件的兩個時間戳?xí)r間對比可以看出，密信App文檔簽名時先用國密時間戳證書簽名后用RSA時間戳簽名。

密信可信時間戳免費試用搜索：密信MeSign

試用地址：https://www.mesign.com/zh-cn/tsa/index.html

例：倒計時

案例分析：

1.這個倒計時是不斷變化的，因此需要定時器來自動變化(setInterval)

2.三個黑色盒子里面分別存放時分秒

3.三個黑色盒子利用innerHTML放入計算的小時分鐘秒數(shù)

4.第一次執(zhí)行也是間隔毫秒數(shù)，因此剛刷新頁面會有空白

5.最好采取封裝函數(shù)的方式，這樣可以先調(diào)用一次這個函數(shù)，防止剛開始刷新頁面有空白問題。

倒計時的算法：

1.核心算法:輸入的時間減去現(xiàn)在的時間就是剩余的時間,即倒計時,但是不能拿著時分秒相減,比如05分減去25分,

結(jié)果會是負(fù)數(shù)的

2.用時間戳來做,用戶輸入時間總的毫秒數(shù)減去現(xiàn)在時間的總的毫秒數(shù),得到的就是剩余時間的毫秒數(shù).

3.把剩余時間總的毫秒數(shù)轉(zhuǎn)換為天、時、分、秒、（時間戳轉(zhuǎn)換為時分秒）*/

//轉(zhuǎn)換公式如下：

/*d = parseInt(總秒數(shù)/60/60/24); //計算天數(shù)

h = parseInt(總秒數(shù)/60/60%24); //計算小時

m = parseInt(總秒數(shù)/60%24); //計算分鐘

s = parseInt(總秒數(shù)%60); //計算當(dāng)前秒數(shù)*/

function conus(time){

var dqtime = +new Date(time);

var zqtime = +new Date();

var times = (dqtime - zqtime) / 1000;

var t = parseInt(times / 60 / 60 / 24);//天

t = t < 10 ? '0' + t:t;

var s = parseInt(times / 60 / 60 % 24);//時

s = s < 10 ? '0' + s:s;

var f = parseInt(times / 60 % 60);//分

f = f < 10 ? '0' + f:f;

var m = parseInt(times % 60);//秒

m = m < 10 ? '0' + m:m;

return t + '天' + s + '時' + f + '分' + m + '秒';

}

console.log(conus('2022-6-7 12:00:00'));

源碼如下