整合營銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          JS實(shí)用小方法-將時(shí)間轉(zhuǎn)換為 `剛剛`、`幾秒前`、

          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 秒。

          在處理時(shí)間時(shí),根據(jù)需要選擇適當(dāng)?shù)母袷竭M(jìn)行表示和解析。

          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)注我。


          主站蜘蛛池模板: 成人国内精品久久久久一区| chinese国产一区二区| 国产高清在线精品一区二区| 精品无码一区在线观看| 国产福利电影一区二区三区,免费久久久久久久精 | 日韩AV片无码一区二区不卡| 日韩精品无码中文字幕一区二区| 亚洲国模精品一区| 国产在线精品一区二区| 成人精品一区二区激情| 国产精品香蕉在线一区| 亚洲日韩AV一区二区三区四区| 爆乳无码AV一区二区三区| 成人国内精品久久久久一区| 精品国产伦一区二区三区在线观看 | 日韩免费视频一区二区| 亚洲爆乳精品无码一区二区| 琪琪see色原网一区二区| 日本一区二区三区精品中文字幕| 2018高清国产一区二区三区| 日本高清无卡码一区二区久久| 中文字幕一区二区三区精华液| 久久毛片一区二区| 中文字幕一区二区在线播放| 亚洲综合av一区二区三区不卡| 日韩社区一区二区三区| 99久久人妻精品免费一区| 亚洲AV无码一区二区三区网址| 综合久久一区二区三区| 国产精品第一区揄拍| 国精无码欧精品亚洲一区| 日韩精品国产一区| 中文字幕一区二区三区在线观看| 国产综合精品一区二区| 久久精品黄AA片一区二区三区| 久久久不卡国产精品一区二区| 无码人妻精品一区二区三区久久久| 国语精品一区二区三区| 一区二区国产在线观看| 精彩视频一区二区| 免费日本一区二区|