JS實用小方法-將時間轉換為 `剛剛`、`幾秒前`、

JS實用小方法：將時間轉換為 `剛剛`、`幾秒前`、`幾分鐘前`、`幾小時前`、`幾天前`、幾月前或按照傳入格式顯示

隨著Web應用的不斷發展，用戶對于界面中時間展示的友好性和實時性有著越來越高的要求。本文將介紹一個JavaScript實用技巧，通過簡潔高效的代碼實現將時間戳轉換為如“剛剛”、“幾秒前”、“幾分鐘前”等更加人性化的表達方式，同時也支持按照指定格式精確顯示。

### 一、需求分析與設計思路

首先，我們需要獲取當前時間，并與目標時間進行比較，根據兩者的時間差來決定顯示的內容。時間差在一定范圍內（如1分鐘內）顯示為“剛剛”，大于1分鐘但在1小時內的顯示為“幾分鐘前”，以此類推，直至按月份和日期顯示。

### 二、核心JS函數編寫

```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 = ['年', '個月', '天', '小時', '分鐘', '秒'];

var timeGap = Math.floor(diff / year);

if (timeGap >= 1) return `${timeGap}年前`;

timeGap = Math.floor(diff / month);

if (timeGap >= 1) return `${timeGap}個月前`;

timeGap = Math.floor(diff / day);

if (timeGap >= 1) return `${timeGap}天前`;

timeGap = Math.floor(diff / hour);

if (timeGap >= 1) return `${timeGap}小時前`;

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>

<head>

<title>時間轉換示例</title>

</head>

<body>

// 獲取元素并轉換時間

var timestampEl = document.getElementById('timestamp');

var timestamp = parseInt(timestampEl.textContent);

var formattedTime = formatTimeago(timestamp);

// 顯示轉換后的時間

timestampEl.textContent = formattedTime;

</script>

</body>

</html>

```

### 四、自定義格式化輸出

如果你還需要按照特定格式（如 "YYYY-MM-DD HH:mm:ss"）顯示時間，只需要在調用 `formatTimeago` 函數時傳入對應的格式字符串即可：

```javascript

var customFormatTime = formatTimeago(timestamp, 'YYYY-MM-DD HH:mm:ss');

```

這樣就完成了一個簡單且實用的時間格式轉換工具函數，不僅適用于實時更新的動態消息場景，還能滿足對歷史數據精確時間格式的需求，提升用戶體驗。希望這個小技巧能幫助你在Web前端開發過程中提高效率，優化交互效果。

計算機編程中，常見的時間格式有以下幾種：

1：ISO 8601 格式：國際標準的日期和時間表示方法。
格式為 "YYYY-MM-DDTHH:mm:ss.sssZ"，其中 "T" 是日期和時間的分隔符，"Z" 表示時區。
例如，"2023-09-29T12:34:56Z" 表示 2023 年 9 月 29 日 12 時 34 分 56 秒的時間點。

2：日期字符串格式：常見的日期表示方法，通常是大家可讀的形式展示。
格式可以是 "YYYY-MM-DD"（例如 "2023-09-29"）、"MM/DD/YYYY"（例如 "09/29/2023"）或 "DD/MM/YYYY"（例如 "29/09/2023"）等。

3：時間戳：
時間戳是指從某個固定的起點（通常是 Unix 時間的起點，即 1970 年 1 月 1 日 00:00:00 UTC）以來經過的毫秒數、秒數或其他單位數。整數形式表示。

4：24 小時制時間：
以小時、分鐘和秒為單位，使用 24 小時制。例如，"12:34:56" 表示 12 時 34 分 56 秒。

5：AM/PM 時間：
使用 12 小時制，并在時間后面加上 "AM" 或 "PM" 表示上午或下午。例如，"12:34:56 PM" 表示下午 12 時 34 分 56 秒。

在處理時間時，根據需要選擇適當的格式進行表示和解析。

1：如何將日期字符串轉換為時間戳？
在JavaScript中，可以使用Date對象和其相關方法將日期字符串轉換為時間戳。下面是一個示例代碼：

const dateString = '2021-09-08'; // 替換為您的日期字符串

const date = new Date(dateString);
const timestamp = date.getTime();

console.log(timestamp); // 輸出時間戳，例如：1631107200000

使用Date對象將日期字符串轉換為日期對象，然后使用getTime()方法獲取該日期對象的時間戳。

2：如何將時間戳轉日期字符串格式？
在JavaScript中，可以使用Date對象和其相關方法將時間戳轉換為日期字符串。下面是一個示例代碼：

const timestamp = 1631107200000; // 替換為您的時間戳

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對象的getFullYear()、getMonth()和getDate()方法來獲取年、月和日，并使用padStart()方法來確保月份和日期為兩位數。

3：如何獲取時間戳中的年、月、日，小時、分鐘和秒？

使用Date對象的相關方法來獲取這些信息。下面是一個示例代碼：

const timestamp = 1631109035000; // 替換為您的時間戳

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對象的getFullYear()、getMonth()、getDate()、getHours()、getMinutes()和getSeconds()方法來獲取這些信息，并使用padStart()方法來確保它們為兩位數。

絡編程之時間格式。

同學們好，今天我們分享的是如何讓搜索引擎等程序更容易地提取網頁中的時間信息。我們將使用time標簽來實現這一目標。這個標簽你們可能已經有所了解，但是現在不需要掌握太多細節，只需要知道它的作用即可。

現在來看看我們的示例頁面，可以看到頁面中包含了很多句不同時間格式的文字。這些文字并沒有什么特別之處，只是每一句都包含著時間信息。時間信息的格式比較復雜，但是這不影響我們的演示效果。

接下來，我們將介紹實現代碼。time標簽用于定義公歷日期或時間、二十四小時制，時間和時區偏移是可選的。在所有瀏覽器中，time標簽不會渲染任何特殊的效果。但是，它可以讓搜索引擎更容易地在網頁中找到對應的時間信息。

使用time標簽的另一個原因是，世界上有許多不同的日期格式，但是這些不同的格式不容易被電腦識別。如果我們想自動抓取頁面上所有事件的日期并將它們插入到日歷中，time元素可以讓我們附上清晰的可被機器識別的時間或日期。因此，time標簽并不是為了給用戶看的，而是為了方便搜索引擎更好地在網頁上找到對應的時間。

在我們的示例中，時間和普通文字看上去沒有任何區別。除了搜索引擎，網頁同手機上的日歷、提醒等應用程序交互時，time標簽也可以提供很大的方便。

time標簽非常簡單，只包含一個屬性datatime，用于規定日期和時間。如果需要，我們還可以通過元素的內容來指定日期和時間。time標簽的值有很多種，只要是符合規范的時間寫法格式，都可以被接受并轉化為第三方使用的格式。

總之，time標簽的使用頻率并不高，不需要我們進行太多的學習和理解。如果你們知道有這個東西并且知道它的大概意思，就可以了。

今天的分享就到這里，所有的案例和相關文檔都可以向我索取。

下期見，想學習編程的同學請關注我。

在線咨詢

上一篇：如何用JavaScript創建彈出窗口
下一篇：JavaScript代碼怎樣引入到HTML中？

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

JS實用小方法-將時間轉換為 `剛剛`、`幾秒前`、

在處理時間時，根據需要選擇適當的格式進行表示和解析。

您的項目需求

JS實用小方法-將時間轉換為 `剛剛`、`幾秒前`、

在處理時間時，根據需要選擇適當的格式進行表示和解析。