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


Posted in Javascript onSeptember 10, 2020

在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 按照创建时间和当前时间显示操作(刚刚,几小时前,几天前)

补充知识: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)
      }

内容小结

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

Javascript 相关文章推荐
URL编码转换,escape() encodeURI() encodeURIComponent()
Dec 27 Javascript
Chrome中JSON.parse的特殊实现
Jan 12 Javascript
鼠标经过显示二级菜单js特效
Aug 13 Javascript
二叉树先序遍历的非递归算法具体实现
Jan 09 Javascript
Jquery 获取指定标签的对象及属性的设置与移除
May 29 Javascript
Node.js 服务器端应用开发框架 -- Hapi.js
Jul 29 Javascript
详解Jquery实现ready和bind事件
Apr 14 Javascript
node.js cookie-parser 中间件介绍
Jun 06 Javascript
获取jqGrid中选择的行的数据
Nov 30 Javascript
Vue-CLI 项目在pycharm中配置方法
Aug 30 Javascript
javascript删除数组元素的七个方法示例
Sep 09 Javascript
vue+vant-UI框架实现购物车的复选框全选和反选功能
Nov 05 Javascript
vue 导出文件,携带请求头token操作
Sep 10 #Javascript
vue radio单选框,获取当前项(每一项)的value值操作
Sep 10 #Javascript
jquery实现简单每周轮换的日历
Sep 10 #jQuery
vue循环中点击选中再点击取消(单选)的实现
Sep 10 #Javascript
详解vue父子组件状态同步的最佳方式
Sep 10 #Javascript
vue使用echarts实现水平柱形图实例
Sep 09 #Javascript
在vue中实现清除echarts上次保留的数据(亲测有效)
Sep 09 #Javascript
You might like
php访问查询mysql数据的三种方法
2006/10/09 PHP
php中修改浏览器的User-Agent来伪装你的浏览器和操作系统
2011/07/29 PHP
php+mysql实现无限级分类
2015/11/11 PHP
Laravel框架实现多个视图共享相同数据的方法详解
2019/07/09 PHP
JavaScript的Module模式编程深入分析
2013/08/13 Javascript
浅析JavaScript中的同名标识符优先级
2013/12/06 Javascript
JavaScript格式化日期时间的方法和自定义格式化函数示例
2014/04/04 Javascript
js 实现浏览历史记录示例
2014/04/20 Javascript
JavaScript之Object类型介绍
2015/04/01 Javascript
4种JavaScript实现简单tab选项卡切换的方法
2016/01/06 Javascript
webpack常用配置项配置文件介绍
2016/11/07 Javascript
Ajax异步文件上传与NodeJS express服务端处理
2017/04/01 NodeJs
vue.js实现单选框、复选框和下拉框示例
2017/07/18 Javascript
基于jquery的on和click的区别详解
2018/01/15 jQuery
Javascript读写cookie的实例源码
2019/03/16 Javascript
使用mixins实现elementUI表单全局验证的解决方法
2019/04/02 Javascript
Vue+Element实现动态生成新表单并添加验证功能
2019/05/23 Javascript
VUE 自定义组件模板的方法详解
2019/08/30 Javascript
Handtrack.js库实现实时监测手部运动(推荐)
2021/02/08 Javascript
Python 获取新浪微博的最新公共微博实例分享
2014/07/03 Python
python获取文件版本信息、公司名和产品名的方法
2014/10/05 Python
Saltstack快速入门简单汇总
2016/03/01 Python
Django objects的查询结果转化为json的三种方式的方法
2018/11/07 Python
Python实现Restful API的例子
2019/08/31 Python
python GUI库图形界面开发之pyinstaller打包python程序为exe安装文件
2020/02/26 Python
Python如何发送与接收大型数组
2020/08/07 Python
前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)
2018/07/12 HTML / CSS
小学新学期教师寄语
2014/01/18 职场文书
小学教学随笔感言
2014/02/26 职场文书
小摄影师教学反思
2014/04/27 职场文书
公司踏青活动方案
2014/08/16 职场文书
因个人原因离职的辞职信范文
2015/05/12 职场文书
婚礼双方父亲致辞
2015/07/27 职场文书
运动员代表致辞
2015/07/29 职场文书
导游词之唐山景点
2019/12/18 职场文书
nginx网站服务如何配置防盗链(推荐)
2021/03/31 Servers