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 学习 Prototype对象
Jul 12 Javascript
JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式(六)
Apr 07 Javascript
游览器中javascript的执行过程(图文)
May 20 Javascript
jQuery.Validate验证库的使用介绍
Apr 26 Javascript
jQuery左侧大图右侧小图焦点图幻灯切换代码分享
Aug 19 Javascript
简单纯js实现点击切换TAB标签实例
Aug 23 Javascript
javascript实现二级级联菜单的简单制作
Nov 19 Javascript
JS获取月份最后天数、最大天数与某日周数的方法
Dec 08 Javascript
AngualrJS中的Directive制作一个菜单
Jan 26 Javascript
浅谈在react中如何实现扫码枪输入
Jul 04 Javascript
详解Vue SSR( Vue2 + Koa2 + Webpack4)配置指南
Nov 13 Javascript
详解微信小程序开发聊天室—实时聊天,支持图片预览
May 20 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 移除数组重复元素的一点说明
2008/11/27 PHP
PHP结合Ueditor并修改图片上传路径
2016/10/16 PHP
javascript import css实例代码
2008/07/18 Javascript
javascript之AJAX框架使用说明
2010/04/24 Javascript
jquery 实现表单验证功能代码(简洁)
2012/07/03 Javascript
jQuery筛选器children()案例详解(图文)
2013/02/17 Javascript
一个JS的日期格式化算法示例
2013/07/31 Javascript
轻松创建nodejs服务器(10):处理POST请求
2014/12/18 NodeJs
javascript关于运动的各种问题经典总结
2015/04/27 Javascript
jQuery实现的淡入淡出二级菜单效果代码
2015/09/15 Javascript
jquery  实现轮播图详解及实例代码
2016/10/12 Javascript
模板视图和AngularJS之间冲突的解决方法
2016/11/22 Javascript
JS实现京东首页之页面顶部、Logo和搜索框功能
2017/01/12 Javascript
详解Vue.js搭建路由报错 router.map is not a function
2017/06/27 Javascript
基于Vue.js 2.0实现百度搜索框效果
2020/12/28 Javascript
js es6系列教程 - 新的类语法实战选项卡(详解)
2017/09/02 Javascript
详解promise.then,process.nextTick, setTimeout 以及 setImmediate的执行顺序
2018/11/21 Javascript
如何为vuex实现带参数的 getter和state.commit
2019/01/04 Javascript
JavaScript基于面向对象实现的无缝滚动轮播示例
2020/01/17 Javascript
JS加载解析Markdown文档过程详解
2020/05/19 Javascript
24个ES6方法解决JS实际开发问题(小结)
2020/05/31 Javascript
Pipenv一键搭建python虚拟环境的方法
2018/05/22 Python
python 字符串和整数的转换方法
2018/06/25 Python
Python unittest 简单实现参数化的方法
2018/11/30 Python
python 随机打乱 图片和对应的标签方法
2018/12/14 Python
python用match()函数爬数据方法详解
2019/07/23 Python
django-rest-swagger的优化使用方法
2019/08/29 Python
html5标记文字_动力节点Java学院整理
2017/07/11 HTML / CSS
英国最大的纸工艺品商店:CraftStash
2018/12/01 全球购物
波兰办公用品和学校用品在线商店:Dlabiura24.pl
2020/11/18 全球购物
思想汇报格式
2014/01/05 职场文书
党员承诺书格式
2014/05/21 职场文书
2014年个人技术工作总结
2014/12/08 职场文书
MySQL命令行操作时的编码问题详解
2021/04/14 MySQL
Django项目如何正确配置日志(logging)
2021/04/29 Python
Vertica集成Apache Hudi重磅使用指南
2022/03/31 Servers