Vue 按照创建时间和当前时间显示操作(刚刚,几小时前,几天前)

 更新时间:2020年09月10日 09:30:42   作者:雪藏琉璃峰  
这篇文章主要介绍了Vue 按照创建时间和当前时间显示操作(刚刚,几小时前,几天前),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

在methods中创建方法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中根据时间戳计算时间间隔-年龄

实现目标

由于数据库没有直接存储用户的年龄,只有以时间戳为格式的出生日期,所以不得不在前端做一下计算处理。下面就和大家一起来看一下前端JS的实现方法。

功能代码

由于时间戳是包含了具体时间的,所以在转日期后截取年月日部分即可。

再获取当前的时期计算间隔得出用户的年龄。

  // 获取用户年龄
   this.userAge = this.toAge(timeStamp);
   console.log(this.userAge);

  // 根据返回的日期计算间隔
       toAge(timeStamp) {
        let birthDate = this.toDate(timeStamp).substr(0, 4);
        let newDate = new Date().getFullYear();
        return (newDate - parseInt(birthDate));
      }
      
      // 时间戳转日期
      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)
      }

内容小结

又是一个小功能的实现,一边记录下自己的代码,一边和大家分享平时代码的点滴,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 浅谈nuxtjs校验登录中间件和混入(mixin)

    浅谈nuxtjs校验登录中间件和混入(mixin)

    这篇文章主要介绍了浅谈nuxtjs校验登录中间件和混入(mixin),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • 基于vue3+TypeScript实现一个简易的Calendar组件

    基于vue3+TypeScript实现一个简易的Calendar组件

    最近在学习 react,在学习到使用 react 开发 Calendar 组件的时候,突然联想到使用 vue 进行 Calendar 功能的实现,因为目前使用的技术栈是 vue,刚好可以加深下对 vue3 和 ts 的使用印象,所以本文给大家介绍了基于vue3+TypeScript实现一个简易的Calendar组件
    2024-05-05
  • vue3输入单号和张数如何自动生成连号的单号

    vue3输入单号和张数如何自动生成连号的单号

    最近遇到这样的需求输入连号事件,需要在表格中输入物流单号,物流号码,生成的数量,名称,点击确定自动生成固定数量的连号物流单号,本文重点介绍vue3输入单号和张数,自动生成连号的单号,感兴趣的朋友一起看看吧
    2024-02-02
  • vue返回上一页(后退)的几种方法与区别说明

    vue返回上一页(后退)的几种方法与区别说明

    这篇文章主要介绍了vue返回上一页(后退)的几种方法与区别说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • 源码分析Vue3响应式核心之reactive

    源码分析Vue3响应式核心之reactive

    这篇文章主要为大家详细介绍了Vue3响应式核心之reactive的相关知识,文中的示例代码讲解详细,对我们学习Vue3有一定的帮助,需要的可以参考一下
    2023-04-04
  • 在Vue中实现二维码生成与扫描功能的方法

    在Vue中实现二维码生成与扫描功能的方法

    二维码是一种广泛应用于各种场合的编码方式,它可以将信息编码成一张二维图案,方便快捷地传递信息,在Vue.js中,我们可以使用一些库和组件来实现二维码的生成和扫描,本文将介绍如何在Vue中实现二维码的生成和扫描的方法
    2023-06-06
  • Vue浅析讲解动态组件与缓存组件及异步组件的使用

    Vue浅析讲解动态组件与缓存组件及异步组件的使用

    这篇文章主要介绍了Vue开发中的动态组件与缓存组件及异步组件的使用教程,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-09-09
  • 详解vue-router2.0动态路由获取参数

    详解vue-router2.0动态路由获取参数

    本篇文章主要介绍了详解vue-router2.0动态路由获取参数,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • vue项目实现webpack配置代理,解决跨域问题

    vue项目实现webpack配置代理,解决跨域问题

    这篇文章主要介绍了vue项目实现webpack配置代理,解决跨域问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • Vue Router深扒实现原理

    Vue Router深扒实现原理

    在看这篇文章的几点要求:需要你先知道Vue-Router是个什么东西,用来解决什么问题,以及它的基本使用。如果你还不懂的话,建议上官网了解下Vue-Router的基本使用后再回来看这篇文章
    2022-09-09

最新评论