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 相关文章推荐
Prototype使用指南之ajax
Jan 10 Javascript
JQuery中$.each 和$(selector).each()的区别详解
Mar 13 Javascript
js实现input密码框提示信息的方法(附html5实现方法)
Jan 14 Javascript
Jquery实现$.fn.extend和$.extend函数
Apr 14 Javascript
js实现加载更多功能实例
Oct 27 Javascript
js仿京东轮播效果 选项卡套选项卡使用
Jan 12 Javascript
详解Vue如何支持JSX语法
Nov 10 Javascript
详解webpack-dev-server使用http-proxy解决跨域问题
Jan 13 Javascript
mpvue小程序仿qq左滑置顶删除组件
Aug 03 Javascript
微信小程序实现无限滚动列表
May 29 Javascript
js实现树形数据转成扁平数据的方法示例
Feb 27 Javascript
vue 动态添加的路由页面刷新时失效的原因及解决方案
Feb 26 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实现小型站点广告管理(修正版)
2006/10/09 PHP
用PHP+java实现自动新闻滚动窗口
2006/10/09 PHP
PHP CURL模拟GET及POST函数代码
2010/04/25 PHP
Drupal 添加模块出现莫名其妙的错误的解决方法(往往出现在模块较多时)
2011/04/18 PHP
基于thinkphp6.0的success、error实现方法
2019/11/05 PHP
js取得url地址参数实例
2013/02/22 Javascript
jquery模拟SELECT下拉框取值效果
2013/10/23 Javascript
Chrome扩展页面动态绑定JS事件提示错误
2014/02/11 Javascript
JavaScript实现检查页面上的广告是否被AdBlock屏蔽了的方法
2014/11/03 Javascript
javascript中undefined与null的区别
2015/08/16 Javascript
Bootstrap基本组件学习笔记之缩略图(13)
2016/12/08 Javascript
微信小程序模板(template)使用详解
2018/01/31 Javascript
vue脚手架及vue-router基本使用
2018/04/09 Javascript
layui 富文本赋值,取值,取纯文本值的实例
2019/09/18 Javascript
如何优雅地在Node应用中进行错误异常处理
2019/11/25 Javascript
JS函数参数的传递与同名参数实例分析
2020/03/16 Javascript
在Echarts图中给坐标轴加一个标识线markLine
2020/07/20 Javascript
[36:13]Mineski vs iG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python 按不同维度求和,最值,均值的实例
2018/06/28 Python
python已协程方式处理任务实现过程
2019/12/27 Python
pygame实现弹球游戏
2020/04/14 Python
Python如何在bool函数中取值
2020/09/21 Python
python 利用opencv实现图像网络传输
2020/11/12 Python
JackJones官方旗舰店:杰克琼斯男装
2018/03/27 全球购物
香港彩色隐形眼镜在线商店:Stunninglens(全球免费送货)
2019/05/10 全球购物
法学毕业生自我鉴定
2013/11/08 职场文书
过程装备与控制工程专业个人的求职信
2013/12/01 职场文书
毕业生自荐书
2013/12/18 职场文书
国贸专业的职业规划范文
2014/01/23 职场文书
《地震中的父与子》教学反思
2014/04/10 职场文书
2016秋季运动会前导词
2015/11/25 职场文书
英语教学课后反思
2016/02/15 职场文书
2016优秀员工先进事迹材料
2016/02/25 职场文书
Python 如何将integer转化为罗马数(3999以内)
2021/06/05 Python
使用Oracle跟踪文件的问题详解
2021/06/28 Oracle
NoSQL优缺点与MongoDB数据库简介
2022/06/05 MongoDB