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+EasyDrag 实现弹出可拖动的Div,同时向Div传值,然后返回Div选中的值
Oct 24 Javascript
基于jQuery的仿flash的广告轮播
Nov 05 Javascript
Javacript实现颜色梯度变化和渐变的效果代码
May 31 Javascript
JS图像无缝滚动脚本非常好用
Feb 10 Javascript
jquery京东商城双11焦点图多图广告特效代码分享
Sep 06 Javascript
jQuery实现图片向左向右切换效果的简单实例
May 18 Javascript
Vue input控件通过value绑定动态属性及修饰符的方法
May 03 Javascript
基于vue2实现上拉加载功能
Nov 28 Javascript
关于react中组件通信的几种方式详解
Dec 10 Javascript
JS脚本加载后执行相应回调函数的操作方法
Feb 28 Javascript
微信小程序仿抖音视频之整屏上下切换功能的实现代码
May 24 Javascript
js中复选框的取值及赋值示例详解
Oct 18 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中ADODB类详解
2008/03/25 PHP
PHP之数组学习
2011/05/29 PHP
PHP获取网页标题的3种实现方法代码实例
2014/04/11 PHP
php删除指定目录的方法
2015/04/03 PHP
深入理解PHP之OpCode原理详解
2016/06/01 PHP
详解PHP多个进程配合redis的有序集合实现大文件去重
2019/03/06 PHP
php判断数组是否为空的实例方法
2020/05/10 PHP
SlideView 图片滑动(扩展/收缩)展示效果
2010/08/01 Javascript
return false,对阻止事件默认动作的一些测试代码
2010/11/17 Javascript
Nodejs中自定义事件实例
2014/06/20 NodeJs
关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别
2015/10/12 Javascript
jQuery简单实现input文本框内灰色提示文本效果的方法
2015/12/02 Javascript
Node.js 条形码识别程序构建思路详解
2016/02/14 Javascript
jQuery图片轮播插件——前端开发必看
2016/05/31 Javascript
AngularJs 指令详解及示例代码
2016/09/01 Javascript
JS库 Highlightjs 添加代码行号的实现代码
2017/09/13 Javascript
获取本机IP地址的实例(JavaScript / Node.js)
2017/11/24 Javascript
基于Taro的微信小程序模板消息-获取formId功能模块封装实践
2019/07/15 Javascript
微信小程序接入腾讯云验证码的方法步骤
2020/01/07 Javascript
完美解决vue 中多个echarts图表自适应的问题
2020/07/19 Javascript
解决echarts echarts数据动态更新和dataZoom被重置问题
2020/07/20 Javascript
微信小程序视频弹幕发送功能的实现
2020/12/28 Javascript
Python编程语言的35个与众不同之处(语言特征和使用技巧)
2014/07/07 Python
python实现获取客户机上指定文件并传输到服务器的方法
2015/03/16 Python
python简单获取本机计算机名和IP地址的方法
2015/06/03 Python
windows下python之mysqldb模块安装方法
2017/09/07 Python
Android基于TCP和URL协议的网络编程示例【附demo源码下载】
2018/01/23 Python
Pandas读取并修改excel的示例代码
2019/02/17 Python
详解Python Matplot中文显示完美解决方案
2019/03/07 Python
详解【python】str与json类型转换
2019/04/29 Python
python pytest进阶之conftest.py详解
2019/06/27 Python
通过Django Admin+HttpRunner1.5.6实现简易接口测试平台
2020/11/11 Python
怎样自定义一个异常类
2016/09/27 面试题
财务管理专业自荐书
2014/09/02 职场文书
医护人员继续教育学习心得体会
2016/01/19 职场文书
mysql sock文件存储了什么信息
2022/07/15 MySQL