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 相关文章推荐
js下判断 iframe 是否加载完成的完美方法
Oct 26 Javascript
javascript 获取元素样式必杀技
May 04 Javascript
30分钟快速掌握Bootstrap框架
May 24 Javascript
Javascript oop设计模式 面向对象编程简单实例介绍
Dec 13 Javascript
js面向对象编程总结
Feb 16 Javascript
vue.js指令和组件详细介绍及实例
Apr 06 Javascript
Bootstrap组件之下拉菜单,多级菜单及按钮布局方法实例
May 25 Javascript
微信小程序仿美团城市选择
Jun 06 Javascript
通过封装scroll.js 获取滚动条的值
Jul 13 Javascript
详解无限滚动插件vue-infinite-scroll源码解析
May 12 Javascript
关于JS解构的5种有趣用法
Sep 05 Javascript
vue导入.md文件的步骤(markdown转HTML)
Dec 31 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 ? EasyUI DataGrid 资料存的方式介绍
2012/11/07 PHP
php中DOMElement操作xml文档实例演示
2013/03/26 PHP
php把数据表导出为Excel表的最简单、最快的方法(不用插件)
2014/05/10 PHP
分享PHP函数实现数字与文字分页代码
2015/07/28 PHP
PHP+Ajax实现的博客文章添加类别功能示例
2018/03/29 PHP
PHP实现简易计算器功能
2020/08/28 PHP
PhpStorm连接服务器并实现自动上传功能
2020/12/09 PHP
jQuery插件原来如此简单 jQuery插件的机制及实战
2012/02/07 Javascript
基于jquery的可多选的下拉列表框
2012/07/20 Javascript
利用javascript实现web页面中指定区域打印
2013/10/30 Javascript
jQuery购物车插件jsorder用法(支持后台处理程序直接转换成DataTable处理)
2016/06/08 Javascript
javascript中sort排序实例详解
2016/07/24 Javascript
js中判断变量类型函数typeof的用法总结
2016/08/09 Javascript
js点击按钮实现水波纹效果代码(CSS3和Canves)
2016/09/15 Javascript
jquery-mobile基础属性与用法详解
2016/11/23 Javascript
JS高级运动实例分析
2016/12/20 Javascript
解决jquery appaend元素中id绑定事件失效的问题
2017/09/12 jQuery
微信小程序开发之IOS和Android兼容的问题
2017/09/26 Javascript
Three.js基础学习教程
2017/11/16 Javascript
swiper动态改变滑动内容的实现方法
2018/01/17 Javascript
three.js实现圆柱体
2018/12/30 Javascript
vue 引用自定义ttf、otf、在线字体的方法
2019/05/09 Javascript
轻松实现python搭建微信公众平台
2016/02/16 Python
解决python3 json数据包含中文的读写问题
2018/05/10 Python
Pycharm导入Python包,模块的图文教程
2018/06/13 Python
用python生成1000个txt文件的方法
2018/10/25 Python
详解python 降级到3.6终极解决方案
2020/02/06 Python
Iconfont(矢量图标)+iconmoon(图标svg互转)配合javascript实现社交分享系统
2020/04/21 Python
python温度转换华氏温度实现代码
2020/12/06 Python
迪卡侬中国官网:Decathlon中国
2020/08/10 全球购物
软件工程师岗位职责
2013/11/16 职场文书
行政总监岗位职责
2013/12/05 职场文书
企业管理标语
2014/06/10 职场文书
校园广播站开场白
2015/06/01 职场文书
升学宴家长致辞
2015/07/27 职场文书
英语导游欢迎词
2015/09/30 职场文书