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 相关文章推荐
jQuery动态添加的元素绑定事件处理函数代码
Aug 02 Javascript
js showModalDialog参数的使用详解
Jan 07 Javascript
纯JavaScript实现获取onclick、onchange等事件的值
Dec 29 Javascript
用jquery获取自定义的标签属性的值简单实例
Sep 17 Javascript
AngularJS ng-repeat指令及Ajax的应用实例分析
Jul 06 Javascript
node的process以及child_process模块学习笔记
Mar 06 Javascript
浅谈vue-cli 3.0.x 初体验
Apr 11 Javascript
mpvue写一个CPASS小程序的示例
Sep 04 Javascript
Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定
Apr 29 Javascript
JavaScript生成一个不重复的ID的方法示例
Sep 16 Javascript
在vue中使用vuex,修改state的值示例
Nov 08 Javascript
js实现验证码干扰(静态)
Feb 22 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 使用header函数设置HTTP头的示例解析 表头
2013/06/17 PHP
使用CodeIgniter的类库做图片上传
2014/06/12 PHP
php处理单文件、多文件上传代码分享
2016/08/24 PHP
javascript:void(0)的真正含义实例分析
2008/08/20 Javascript
js 关键词高亮(根据ID/tag高亮关键字)案例介绍
2013/01/21 Javascript
js处理json以及字符串的比较等常用操作
2013/09/08 Javascript
浅谈利用JavaScript进行的DDoS攻击原理与防御
2015/06/04 Javascript
jQuery随手笔记之常用的jQuery操作DOM事件
2015/11/29 Javascript
详解Javascript继承的实现
2016/03/25 Javascript
JavaScript String 对象常用方法详解
2016/05/13 Javascript
JS Array创建及concat()split()slice()的使用方法
2016/06/03 Javascript
微信js-sdk界面操作接口用法示例
2016/10/12 Javascript
Vue 拦截器对token过期处理方法
2018/01/23 Javascript
nodejs(officegen)+vue(axios)在客户端导出word文档的方法
2018/07/31 NodeJs
详解实现一个通用的“划词高亮”在线笔记功能
2019/04/23 Javascript
解决IOS端微信H5页面软键盘弹起后页面下方留白的问题
2019/06/05 Javascript
vue + el-form 实现的多层循环表单验证
2020/11/25 Vue.js
[54:06]OG vs TNC 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
[51:36]EG vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
python 以16进制打印输出的方法
2018/07/09 Python
在终端启动Python时报错的解决方案
2020/11/20 Python
css3 box-shadow阴影(外阴影与外发光)图示讲解
2017/08/11 HTML / CSS
canvas绘制文本内容自动换行的实现代码
2019/01/14 HTML / CSS
德国自行车商店:Tretwerk
2019/06/21 全球购物
北京华建集团SQL面试题
2014/06/03 面试题
本科生求职简历的自我评价
2013/10/21 职场文书
应届毕业生求职信范文分享
2013/12/26 职场文书
《雷雨》教学反思
2014/02/20 职场文书
我的老师教学反思
2014/05/01 职场文书
2015年感恩母亲节的演讲稿
2015/03/18 职场文书
员工家属慰问信
2015/03/24 职场文书
使用nginx动态转换图片大小生成缩略图
2021/03/31 Servers
python图像处理基本操作总结(PIL库、Matplotlib及Numpy)
2021/06/08 Python
JavaScript 数组去重详解
2021/09/15 Javascript
springboot应用服务启动事件的监听实现
2022/04/06 Java/Android
Python可视化神器pyecharts之绘制地理图表练习
2022/07/07 Python