Vue 按照創(chuàng)建時間和當前時間顯示操作(剛剛,幾小時前,幾天前)

更新時間：2020年09月10日 09:30:42 作者：雪藏琉璃峰

這篇文章主要介紹了Vue 按照創(chuàng)建時間和當前時間顯示操作(剛剛,幾小時前,幾天前)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

在methods中創(chuàng)建方法showtime，傳入要跟當前時間要對比的時間

  showtime(time) {
   let date =
    typeof time === "number"
     ? new Date(time)
     : new Date((time || "").replace(/-/g, "/"));
   let diff = (new Date().getTime() - date.getTime()) / 1000;
   let dayDiff = Math.floor(diff / 86400);

   let isValidDate =
    Object.prototype.toString.call(date) === "[object Date]" &&
    !isNaN(date.getTime());

   if (!isValidDate) {
    window.console.error("不是有效日期格式");
   }
   const formatDate = function(date) {
    let today = new Date(date);
    let year = today.getFullYear();
    let month = ("0" + (today.getMonth() + 1)).slice(-2);
    let day = ("0" + today.getDate()).slice(-2);
    let hour = today.getHours();
    let minute = today.getMinutes();
    let second = today.getSeconds();
    return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
   };

   if (isNaN(dayDiff) || dayDiff < 0 || dayDiff >= 31) {
    return formatDate(date);
   }
   return (
    (dayDiff === 0 &&
     ((diff < 60 && "剛剛") ||
      (diff < 120 && "1分鐘前") ||
      (diff < 3600 && Math.floor(diff / 60) + "分鐘前") ||
      (diff < 7200 && "1小時前") ||
      (diff < 86400 && Math.floor(diff / 3600) + "小時前"))) ||
    (dayDiff === 1 && "昨天") ||
    (dayDiff < 7 && dayDiff + "天前") ||
    (dayDiff < 31 && Math.ceil(dayDiff / 7) + "周前")
   );
  },

補充知識：Vue中根據(jù)時間戳計算時間間隔-年齡

實現(xiàn)目標

由于數(shù)據(jù)庫沒有直接存儲用戶的年齡，只有以時間戳為格式的出生日期，所以不得不在前端做一下計算處理。下面就和大家一起來看一下前端JS的實現(xiàn)方法。

功能代碼

由于時間戳是包含了具體時間的，所以在轉(zhuǎn)日期后截取年月日部分即可。

再獲取當前的時期計算間隔得出用戶的年齡。

  // 獲取用戶年齡
   this.userAge = this.toAge(timeStamp);
   console.log(this.userAge);

  // 根據(jù)返回的日期計算間隔
       toAge(timeStamp) {
        let birthDate = this.toDate(timeStamp).substr(0, 4);
        let newDate = new Date().getFullYear();
        return (newDate - parseInt(birthDate));
      }
      
      // 時間戳轉(zhuǎn)日期
      toDate(number) {
        let n = number;
        let date = new Date(n);
        let Y = date.getFullYear() + '/';
        let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '/';
        let D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
        return (Y + M + D)
      }

內(nèi)容小結

又是一個小功能的實現(xiàn)，一邊記錄下自己的代碼，一邊和大家分享平時代碼的點滴，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: