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 相关文章推荐
Ext面向对象开发实践(续)
Nov 18 Javascript
详解JavaScript语法对{}处理的坑爹之处
Jun 05 Javascript
Javascript学习笔记之 函数篇(二) : this 的工作机制
Jun 24 Javascript
javascript图片预加载实例分析
Jul 16 Javascript
Angularjs使用directive自定义指令实现attribute继承的方法详解
Aug 05 Javascript
js实现点击图片自动提交action的简单方法
Oct 16 Javascript
jQuery实现复选框的全选和反选
Feb 02 Javascript
利用Node.js+Koa框架实现前后端交互的方法
Feb 27 Javascript
JS正则表达式验证中文字符
May 08 Javascript
Vue调试神器vue-devtools安装方法
Dec 12 Javascript
JS实现可视化音频效果的实例代码
Jan 16 Javascript
JavaScript缓动动画函数的封装方法
Nov 25 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
smarty实例教程
2006/11/19 PHP
php 删除cookie和浏览器重定向
2009/03/16 PHP
一个PHP分页类的代码
2011/05/18 PHP
php 多进程编程父进程的阻塞与非阻塞实例分析
2020/02/22 PHP
jQuery数据缓存用法分析
2015/02/20 Javascript
Validform+layer实现漂亮的表单验证特效
2016/01/17 Javascript
JavaScript实现弹出DIV层同时页面背景渐变成半透明效果
2016/03/25 Javascript
AngularJS基础 ng-csp 指令详解
2016/08/01 Javascript
js+css3实现旋转效果
2017/01/20 Javascript
完美解决spring websocket自动断开连接再创建引发的问题
2017/03/02 Javascript
浅谈Koa服务限流方法实践
2017/10/23 Javascript
JS获取当前地理位置的方法
2017/10/25 Javascript
layui从数据库中获取复选框的值并默认选中方法
2018/08/15 Javascript
JS监听事件的叠加和移除功能
2018/11/19 Javascript
浅析Vue中拆分视图层代码的5点建议
2019/08/15 Javascript
JavaScript中判断为整数的多种方式及保留两位小数的方法
2019/09/09 Javascript
python循环监控远程端口的方法
2015/03/14 Python
Python中动态创建类实例的方法
2017/03/24 Python
Python+OpenCV人脸检测原理及示例详解
2020/10/19 Python
Python使用matplotlib绘制余弦的散点图示例
2018/03/14 Python
浅析python打包工具distutils、setuptools
2018/04/20 Python
Python使用matplotlib绘制三维图形示例
2018/08/25 Python
Python 脚本获取ES 存储容量的实例
2018/12/27 Python
Python实现个人微信号自动监控告警的示例
2019/07/03 Python
centos+nginx+uwsgi+Django实现IP+port访问服务器
2019/11/15 Python
python模拟哔哩哔哩滑块登入验证的实现
2020/04/24 Python
Flask中sqlalchemy模块的实例用法
2020/08/02 Python
KELLER SPORTS荷兰:在线订购最好的运动产品
2020/10/13 全球购物
上海奥佳笔试题面试题
2016/11/16 面试题
2014年元旦促销活动方案
2014/02/22 职场文书
会计电算化专业自荐信
2014/03/15 职场文书
高中综合实践活动总结
2014/07/07 职场文书
担保书格式
2015/01/20 职场文书
2016春节家属慰问信
2015/03/25 职场文书
呼啸山庄读书笔记
2015/06/29 职场文书
端午节将至,用Python爬取粽子数据并可视化,看看网友喜欢哪种粽子吧!
2021/06/11 Python