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 相关文章推荐
经常用的图片在容器中的水平垂直居中实例
Jun 10 Javascript
Microsoft Ajax Minifier 压缩javascript的方法
Mar 05 Javascript
jquery Mobile入门—多页面切换示例学习
Jan 08 Javascript
JavaScript String.replace函数参数实例说明
Jun 06 Javascript
jQuery jcrop插件截图使用方法
Nov 20 Javascript
使用jQuery实现的掷色子游戏动画效果
Mar 14 Javascript
使用text方法获取Html元素文本信息示例
Sep 01 Javascript
简介JavaScript中search()方法的使用
Jun 06 Javascript
浅谈JavaScript中的字符编码转换问题
Jul 07 Javascript
详谈angularjs中路由页面强制更新的问题
Apr 24 Javascript
Jquery获取radio选中值实例总结
Jan 17 jQuery
使用RxJS更优雅地进行定时请求详析
Jun 02 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
分页显示Oracle数据库记录的类之二
2006/10/09 PHP
PHP 的几个配置文件函数
2006/12/21 PHP
支持中文字母数字、自定义字体php验证码代码
2012/02/27 PHP
淘宝ip地址查询类分享(利用淘宝ip库)
2014/01/07 PHP
百度工程师讲PHP函数的实现原理及性能分析(一)
2015/05/13 PHP
基于win2003虚拟机中apache服务器的访问
2017/08/01 PHP
yii2 commands模式以及配置crontab定时任务的方法
2017/08/19 PHP
ThinkPHP框架整合微信支付之刷卡模式图文详解
2019/04/10 PHP
PHP中的self关键字详解
2019/06/23 PHP
用JS实现一个页面多个css样式实现
2008/05/29 Javascript
匹配任意字符的正则表达式写法
2010/04/29 Javascript
JQuery之focus函数使用介绍
2013/08/20 Javascript
js的onload事件及初始化按钮事件示例代码
2013/09/25 Javascript
javascript模拟订火车票和退票示例
2014/04/24 Javascript
15款jQuery分布引导插件分享
2015/02/04 Javascript
JS+CSS实现简单滑动门(滑动菜单)效果
2015/09/19 Javascript
纯js代码制作的网页时钟特效【附实例】
2016/03/30 Javascript
jQuery根据表单name获取值的方法
2016/05/24 Javascript
Javascript 基础---Ajax入门必看
2016/07/06 Javascript
获取当前月(季度/年)的最后一天(set相关操作及应用)
2016/12/27 Javascript
使用jQuery ajaxupload插件实现无刷新上传文件
2017/04/23 jQuery
Nest.js环境变量配置与序列化详解
2021/02/21 Javascript
[01:25]DOTA2超级联赛专访iG 将调整状态找回自己
2013/06/05 DOTA
python使用xslt提取网页数据的方法
2018/02/23 Python
Python使用pickle模块报错EOFError Ran out of input的解决方法
2018/08/16 Python
python实现QQ邮箱/163邮箱的邮件发送
2019/01/22 Python
Python算法中的时间复杂度问题
2019/11/19 Python
如何用PyPy让你的Python代码运行得更快
2020/12/02 Python
Python用Jira库来操作Jira
2020/12/28 Python
纯CSS打造(无图像无js)的非常流行的讲话(语音)气泡效果
2012/12/28 HTML / CSS
canvas 基础之图像处理的使用
2020/04/10 HTML / CSS
漫威玩具服装及周边商品官方购物网站:Marvel Shop
2019/05/11 全球购物
Dyson戴森波兰官网:Dyson.pl
2019/08/05 全球购物
英文版餐饮业求职信
2013/10/18 职场文书
酒店个人求职信范文
2014/01/25 职场文书
VUE解决跨域问题Access to XMLHttpRequest at
2022/05/06 Vue.js