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)系。