整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
JS實(shí)用小方法：將時(shí)間轉(zhuǎn)換為 `剛剛`、`幾秒前`、`幾分鐘前`、`幾小時(shí)前`、`幾天前`、幾月前或按照傳入格式顯示
隨著Web應(yīng)用的不斷發(fā)展，用戶對(duì)于界面中時(shí)間展示的友好性和實(shí)時(shí)性有著越來越高的要求。本文將介紹一個(gè)JavaScript實(shí)用技巧，通過簡(jiǎn)潔高效的代碼實(shí)現(xiàn)將時(shí)間戳轉(zhuǎn)換為如“剛剛”、“幾秒前”、“幾分鐘前”等更加人性化的表達(dá)方式，同時(shí)也支持按照指定格式精確顯示。
### 一、需求分析與設(shè)計(jì)思路
首先，我們需要獲取當(dāng)前時(shí)間，并與目標(biāo)時(shí)間進(jìn)行比較，根據(jù)兩者的時(shí)間差來決定顯示的內(nèi)容。時(shí)間差在一定范圍內(nèi)（如1分鐘內(nèi)）顯示為“剛剛”，大于1分鐘但在1小時(shí)內(nèi)的顯示為“幾分鐘前”，以此類推，直至按月份和日期顯示。
### 二、核心JS函數(shù)編寫
```javascript
function formatTimeago(timestamp, format) {
var now = new Date().getTime();
var targetTime = new Date(timestamp).getTime();
var diff = now - targetTime;
var second = 1000,
minute = second * 60,
hour = minute * 60,
day = hour * 24,
month = day * 30,
year = day * 365;
var unit = ['年', '個(gè)月', '天', '小時(shí)', '分鐘', '秒'];
var timeGap = Math.floor(diff / year);
if (timeGap >= 1) return `${timeGap}年前`;
timeGap = Math.floor(diff / month);
if (timeGap >= 1) return `${timeGap}個(gè)月前`;
timeGap = Math.floor(diff / day);
if (timeGap >= 1) return `${timeGap}天前`;
timeGap = Math.floor(diff / hour);
if (timeGap >= 1) return `${timeGap}小時(shí)前`;
timeGap = Math.floor(diff / minute);
if (timeGap >= 1) return `${timeGap}分鐘前`;
timeGap = Math.floor(diff / second);
if (diff < minute) return '剛剛';
else return `${timeGap}秒前`;
// 如果需要按照特定格式顯示，例如"YYYY-MM-DD HH:mm:ss"
if (format) {
var date = new Date(timestamp);
return `${date.getFullYear()}-${addZero(date.getMonth()+1)}-${addZero(date.getDate())} ${addZero(date.getHours())}:${addZero(date.getMinutes())}:${addZero(date.getSeconds())}`;
}
function addZero(num) {
return ('0' + num).slice(-2);
}
}
```
### 三、使用示例
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>時(shí)間轉(zhuǎn)換示例</title>
</head>
<body>
<!-- 假設(shè)我們有一個(gè)從服務(wù)器獲取的時(shí)間戳 -->
<p id="timestamp">1609452000000</p>
<script>
// 獲取元素并轉(zhuǎn)換時(shí)間
var timestampEl = document.getElementById('timestamp');
var timestamp = parseInt(timestampEl.textContent);
var formattedTime = formatTimeago(timestamp);
// 顯示轉(zhuǎn)換后的時(shí)間
timestampEl.textContent = formattedTime;
</script>
</body>
</html>
```
### 四、自定義格式化輸出
如果你還需要按照特定格式（如 "YYYY-MM-DD HH:mm:ss"）顯示時(shí)間，只需要在調(diào)用 `formatTimeago` 函數(shù)時(shí)傳入對(duì)應(yīng)的格式字符串即可：
```javascript
var customFormatTime = formatTimeago(timestamp, 'YYYY-MM-DD HH:mm:ss');
```
這樣就完成了一個(gè)簡(jiǎn)單且實(shí)用的時(shí)間格式轉(zhuǎn)換工具函數(shù)，不僅適用于實(shí)時(shí)更新的動(dòng)態(tài)消息場(chǎng)景，還能滿足對(duì)歷史數(shù)據(jù)精確時(shí)間格式的需求，提升用戶體驗(yàn)。希望這個(gè)小技巧能幫助你在Web前端開發(fā)過程中提高效率，優(yōu)化交互效果。
計(jì)算機(jī)編程中，常見的時(shí)間格式有以下幾種：
1：ISO 8601 格式：國際標(biāo)準(zhǔn)的日期和時(shí)間表示方法。
格式為 "YYYY-MM-DDTHH:mm:ss.sssZ"，其中 "T" 是日期和時(shí)間的分隔符，"Z" 表示時(shí)區(qū)。
例如，"2023-09-29T12:34:56Z" 表示 2023 年 9 月 29 日 12 時(shí) 34 分 56 秒的時(shí)間點(diǎn)。
2：日期字符串格式：常見的日期表示方法，通常是大家可讀的形式展示。
格式可以是 "YYYY-MM-DD"（例如 "2023-09-29"）、"MM/DD/YYYY"（例如 "09/29/2023"）或 "DD/MM/YYYY"（例如 "29/09/2023"）等。
3：時(shí)間戳：
時(shí)間戳是指從某個(gè)固定的起點(diǎn)（通常是 Unix 時(shí)間的起點(diǎn)，即 1970 年 1 月 1 日 00:00:00 UTC）以來經(jīng)過的毫秒數(shù)、秒數(shù)或其他單位數(shù)。整數(shù)形式表示。
4：24 小時(shí)制時(shí)間：
以小時(shí)、分鐘和秒為單位，使用 24 小時(shí)制。例如，"12:34:56" 表示 12 時(shí) 34 分 56 秒。
5：AM/PM 時(shí)間：
使用 12 小時(shí)制，并在時(shí)間后面加上 "AM" 或 "PM" 表示上午或下午。例如，"12:34:56 PM" 表示下午 12 時(shí) 34 分 56 秒。
1：如何將日期字符串轉(zhuǎn)換為時(shí)間戳？
在JavaScript中，可以使用Date對(duì)象和其相關(guān)方法將日期字符串轉(zhuǎn)換為時(shí)間戳。下面是一個(gè)示例代碼：
const dateString = '2021-09-08'; // 替換為您的日期字符串
const date = new Date(dateString);
const timestamp = date.getTime();
console.log(timestamp); // 輸出時(shí)間戳，例如：1631107200000
使用Date對(duì)象將日期字符串轉(zhuǎn)換為日期對(duì)象，然后使用getTime()方法獲取該日期對(duì)象的時(shí)間戳。
2：如何將時(shí)間戳轉(zhuǎn)日期字符串格式？
在JavaScript中，可以使用Date對(duì)象和其相關(guān)方法將時(shí)間戳轉(zhuǎn)換為日期字符串。下面是一個(gè)示例代碼：
const timestamp = 1631107200000; // 替換為您的時(shí)間戳
const date = new Date(timestamp);
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
const dateString = `${year}-${month}-${day}`;
console.log(dateString); // 輸出日期字符串，例如：2021-09-08
使用Date對(duì)象的getFullYear()、getMonth()和getDate()方法來獲取年、月和日，并使用padStart()方法來確保月份和日期為兩位數(shù)。
3：如何獲取時(shí)間戳中的年、月、日，小時(shí)、分鐘和秒？
使用Date對(duì)象的相關(guān)方法來獲取這些信息。下面是一個(gè)示例代碼：
const timestamp = 1631109035000; // 替換為您的時(shí)間戳
const date = new Date(timestamp);
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
const hours = String(date.getHours()).padStart(2, '0');
const minutes = String(date.getMinutes()).padStart(2, '0');
const seconds = String(date.getSeconds()).padStart(2, '0');
console.log(year, month, day, hours, minutes, seconds);
使用Date對(duì)象的getFullYear()、getMonth()、getDate()、getHours()、getMinutes()和getSeconds()方法來獲取這些信息，并使用padStart()方法來確保它們?yōu)閮晌粩?shù)。
絡(luò)編程之時(shí)間格式。
同學(xué)們好，今天我們分享的是如何讓搜索引擎等程序更容易地提取網(wǎng)頁中的時(shí)間信息。我們將使用time標(biāo)簽來實(shí)現(xiàn)這一目標(biāo)。這個(gè)標(biāo)簽?zāi)銈兛赡芤呀?jīng)有所了解，但是現(xiàn)在不需要掌握太多細(xì)節(jié)，只需要知道它的作用即可。
現(xiàn)在來看看我們的示例頁面，可以看到頁面中包含了很多句不同時(shí)間格式的文字。這些文字并沒有什么特別之處，只是每一句都包含著時(shí)間信息。時(shí)間信息的格式比較復(fù)雜，但是這不影響我們的演示效果。
接下來，我們將介紹實(shí)現(xiàn)代碼。time標(biāo)簽用于定義公歷日期或時(shí)間、二十四小時(shí)制，時(shí)間和時(shí)區(qū)偏移是可選的。在所有瀏覽器中，time標(biāo)簽不會(huì)渲染任何特殊的效果。但是，它可以讓搜索引擎更容易地在網(wǎng)頁中找到對(duì)應(yīng)的時(shí)間信息。
使用time標(biāo)簽的另一個(gè)原因是，世界上有許多不同的日期格式，但是這些不同的格式不容易被電腦識(shí)別。如果我們想自動(dòng)抓取頁面上所有事件的日期并將它們插入到日歷中，time元素可以讓我們附上清晰的可被機(jī)器識(shí)別的時(shí)間或日期。因此，time標(biāo)簽并不是為了給用戶看的，而是為了方便搜索引擎更好地在網(wǎng)頁上找到對(duì)應(yīng)的時(shí)間。
在我們的示例中，時(shí)間和普通文字看上去沒有任何區(qū)別。除了搜索引擎，網(wǎng)頁同手機(jī)上的日歷、提醒等應(yīng)用程序交互時(shí)，time標(biāo)簽也可以提供很大的方便。
time標(biāo)簽非常簡(jiǎn)單，只包含一個(gè)屬性datatime，用于規(guī)定日期和時(shí)間。如果需要，我們還可以通過元素的內(nèi)容來指定日期和時(shí)間。time標(biāo)簽的值有很多種，只要是符合規(guī)范的時(shí)間寫法格式，都可以被接受并轉(zhuǎn)化為第三方使用的格式。
總之，time標(biāo)簽的使用頻率并不高，不需要我們進(jìn)行太多的學(xué)習(xí)和理解。如果你們知道有這個(gè)東西并且知道它的大概意思，就可以了。
今天的分享就到這里，所有的案例和相關(guān)文檔都可以向我索取。
下期見，想學(xué)習(xí)編程的同學(xué)請(qǐng)關(guān)注我。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
