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 相关文章推荐
js onclick事件传参讲解
Nov 06 Javascript
JavaScript里 ==与===区别详解
Aug 16 Javascript
原生Javascript插件开发实践
Jan 09 Javascript
将鼠标焦点定位到文本框最后(代码分享)
Jan 11 Javascript
js实现轮播图的两种方式(构造函数、面向对象)
Sep 30 Javascript
vue使用 better-scroll的参数和方法详解
Jan 25 Javascript
webpack+vue-cil中proxyTable处理跨域的方法
Jul 20 Javascript
webpack dll打包重复问题优化的解决
Oct 10 Javascript
浅谈Vue2.4.0 $attrs与inheritAttrs的具体使用
Mar 08 Javascript
Vuex的各个模块封装的实现
Jun 05 Javascript
Vue实现简单的拖拽效果
Aug 25 Javascript
Vue中插槽slot的使用方法与应用场景详析
Jun 08 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框架的性能
2008/01/10 PHP
PHP的Laravel框架中使用消息队列queue及异步队列的方法
2016/03/21 PHP
php如何控制用户对图片的访问 PHP禁止图片盗链
2016/03/25 PHP
PHP实现Unicode编码相互转换的方法示例
2020/11/17 PHP
JQuery入门——用one()方法绑定事件处理函数(仅触发一次)
2013/02/05 Javascript
html的DOM中Event对象onabort事件用法实例
2015/01/21 Javascript
JS实现图片平面旋转的方法
2016/03/01 Javascript
jquery.validate表单验证插件使用方法解析
2016/11/07 Javascript
javascript验证香港身份证的格式或真实性
2017/02/07 Javascript
js中的reduce()函数讲解
2019/01/18 Javascript
一秒学会微信小程序制作table表格
2019/02/14 Javascript
基于 jQuery 实现键盘事件监听控件
2019/04/04 jQuery
使用 vue 实现灭霸打响指英雄消失的效果附demo
2019/05/06 Javascript
Vue组件之高德地图地址选择功能的实例代码
2019/06/21 Javascript
vue中keep-alive,include的缓存问题
2019/11/26 Javascript
原生javascript单例模式的应用实例分析
2020/02/23 Javascript
[49:27]LGD vs OG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python抽象基类用法实例分析
2015/06/04 Python
Python通过正则表达式选取callback的方法
2015/07/18 Python
python调用fortran模块
2016/04/08 Python
python3判断url链接是否为404的方法
2018/08/10 Python
对python实时得到鼠标位置的示例讲解
2018/10/14 Python
python2.7实现邮件发送功能
2018/12/12 Python
代码详解django中数据库设置
2019/01/28 Python
Python中Numpy mat的使用详解
2019/05/24 Python
Python操作excel的方法总结(xlrd、xlwt、openpyxl)
2019/09/02 Python
Python代码生成视频的缩略图的实例讲解
2019/12/22 Python
python爬虫scrapy框架的梨视频案例解析
2021/02/20 Python
使用Canvas操作像素的方法
2018/06/14 HTML / CSS
extern在函数声明中是什么意思
2014/01/19 面试题
Java基础类库面试题
2013/09/04 面试题
离职信范文
2015/06/23 职场文书
单位领导婚礼致辞
2015/07/28 职场文书
2016个人先进事迹材料范文
2016/03/01 职场文书
Spring事务管理下synchronized锁失效问题的解决方法
2022/03/31 Java/Android
特别篇动画《总之就是非常可爱 ~制服~》PV公开,2022年夏季播出
2022/04/04 日漫