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 相关文章推荐
HTTP状态代码以及定义(解释)
Feb 02 Javascript
ext监听事件方法[初级篇]
Apr 27 Javascript
解决IE下select标签innerHTML插入option的BUG(兼容IE,FF,Opera,Chrome,Safari)
May 13 Javascript
js面向对象 多种创建对象方法小结
May 21 Javascript
jQuery响应enter键的实现思路
Apr 18 Javascript
AngularJS 自定义过滤器详解及实例代码
Sep 14 Javascript
原生js实现中奖信息无间隙滚动效果
Jan 18 Javascript
详解Vue如何支持JSX语法
Nov 10 Javascript
vue-cli中的babel配置文件.babelrc实例详解
Feb 22 Javascript
vue 之 .sync 修饰符示例详解
Apr 21 Javascript
Vue-cli3多页面配置详解
Mar 22 Javascript
vue从后台渲染文章列表以及根据id跳转文章详情详解
Dec 14 Vue.js
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采用ajax数据提交post与post常见方法总结
2014/11/10 PHP
php创建和删除目录函数介绍和递归删除目录函数分享
2014/11/18 PHP
php base64 编码与解码实例代码
2017/03/21 PHP
tp5(thinkPHP5)操作mongoDB数据库的方法
2018/01/20 PHP
javascript hashtable实现代码
2009/10/13 Javascript
Javascript实现关联数据(Linked Data)查询及注意细节
2013/02/22 Javascript
多种方式实现JS调用后台方法进行数据交互
2013/08/20 Javascript
js常用系统函数用法实例分析
2015/01/12 Javascript
jQuery使用fadein方法实现渐出效果实例
2015/03/27 Javascript
基于JavaScript实现全屏透明遮罩div层锁屏效果
2016/01/26 Javascript
使用微信内嵌H5网页解决JS倒计时失效问题
2017/01/13 Javascript
xmlplus组件设计系列之分隔框(DividedBox)(8)
2017/05/02 Javascript
详解解决Vue相同路由参数不同不会刷新的问题
2018/10/12 Javascript
vue中引入mxGraph的步骤详解
2019/05/17 Javascript
react+redux仿微信聊天界面
2019/06/21 Javascript
vue中v-model对select的绑定操作
2020/08/31 Javascript
Python中的列表生成式与生成器学习教程
2016/03/13 Python
python批量赋值操作实例
2018/10/22 Python
详解Python中的内建函数,可迭代对象,迭代器
2019/04/29 Python
在cmd中查看python的安装路径方法
2019/07/03 Python
NumPy中的维度Axis详解
2019/11/26 Python
CentOS7下安装python3.6.8的教程详解
2020/01/03 Python
FLIR美国官网:热成像, 夜视和红外摄像系统
2018/07/13 全球购物
如何打印出当前源文件的文件名以及源文件的当前行号
2015/04/05 面试题
办公室主任先进事迹
2014/01/18 职场文书
优秀教师感人事迹材料
2014/05/04 职场文书
平安家庭示范户事迹
2014/06/02 职场文书
商场促销活动总结
2014/07/10 职场文书
员工生日活动方案
2014/08/24 职场文书
党的群众路线教育实践活动领导班子整改措施
2014/09/30 职场文书
普通党员整改措施
2014/10/24 职场文书
业务员岗位职责
2015/02/03 职场文书
2015廉洁自律个人总结
2015/02/14 职场文书
详解Html5项目适配系统深色模式方案总结
2021/04/14 HTML / CSS
怎么禁用Windows 11快照布局? win11不使用快照布局的技巧
2021/11/21 数码科技
Mysql超详细讲解死锁问题的理解
2022/04/01 MySQL