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实现图片产生波纹一样flash效果的方法
Feb 27 Javascript
HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)
Jan 26 Javascript
js带闹铃功能的倒计时代码
Sep 29 Javascript
微信小程序 增、删、改、查操作实例详解
Jan 13 Javascript
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
Apr 02 jQuery
vue-cli单页应用改成多页应用配置详解
Jul 14 Javascript
详解Vue webapp项目通过HBulider打包原生APP(vue+webpack+HBulider)
Feb 02 Javascript
通过循环优化 JavaScript 程序
Jun 24 Javascript
javascript 原型与原型链的理解及实例分析
Nov 23 Javascript
Vue组件间数据传递的方式(3种)
Jul 13 Javascript
在vue-cli创建的项目中使用sass操作
Aug 10 Javascript
jQuery实现回到顶部效果
Oct 19 jQuery
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
PHP5在Apache下的两种模式的安装
2006/09/05 PHP
ThinkPHP中URL路径访问与模块控制器之间的关系
2014/08/23 PHP
php类自动装载、链式操作、魔术方法实现代码
2017/07/23 PHP
jQuery Ajax方法调用 Asp.Net WebService 的详细实例代码
2011/04/27 Javascript
namespace.js Javascript的命名空间库
2011/10/11 Javascript
js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码
2012/12/17 Javascript
微信分享的标题、缩略图、连接及描述设置方法
2014/10/14 Javascript
JavaScript实现的简单幂函数实例
2015/04/17 Javascript
javascript实现全角转半角的方法
2016/01/23 Javascript
javascript实现页面滚屏效果
2017/01/17 Javascript
基于vue-element组件实现音乐播放器功能
2018/05/06 Javascript
element-ui table span-method(行合并)的实现代码
2018/12/20 Javascript
微信小程序使用字体图标的方法
2019/05/23 Javascript
深入浅出了解Node.js Streams
2019/05/27 Javascript
Vue页面刷新记住页面状态的实现
2019/12/27 Javascript
JavaScript中遍历的十种方法总结
2020/12/15 Javascript
Python GUI布局尺寸适配方法
2018/10/11 Python
Python OpenCV读取png图像转成jpg图像存储的方法
2018/10/28 Python
python 通过类中一个方法获取另一个方法变量的实例
2019/01/22 Python
在Python 中实现图片加框和加字的方法
2019/01/26 Python
django的分页器Paginator 从django中导入类
2019/07/25 Python
pycharm 实现光标快速移动到括号外或行尾的操作
2021/02/05 Python
UGG英国官方网站:UGG UK
2018/02/08 全球购物
c语言常见笔试题总结
2016/09/05 面试题
音乐表演专业毕业生求职信
2013/10/14 职场文书
毕业生护理专业个人求职信范文
2014/01/04 职场文书
高三语文教学反思
2014/01/15 职场文书
公务员培训自我鉴定
2014/02/01 职场文书
潘婷洗发水广告词
2014/03/14 职场文书
公司业务员岗位职责
2014/03/18 职场文书
学生会感恩节活动方案
2014/10/11 职场文书
鼋头渚导游词
2015/02/05 职场文书
草房子读书笔记
2015/06/29 职场文书
为什么MySQL选择Repeatable Read作为默认隔离级别
2021/07/26 MySQL
游戏《我的世界》澄清Xbox版暂无计划加入光追
2022/04/03 其他游戏
使用Redis实现分布式锁的方法
2022/06/16 Redis