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 相关文章推荐
JavaScript 数组的 uniq 方法
Jan 23 Javascript
jquery中常用的SET和GET$(”#msg”).html循环介绍
Oct 09 Javascript
浅析2种JavaScript继承方式
Dec 04 Javascript
阿里巴巴技术文章分享 Javascript继承机制的实现
Jan 14 Javascript
jquery插件方式实现table查询功能的简单实例
Jun 06 Javascript
基于js实现的限制文本框只可以输入数字
Dec 05 Javascript
原生js实现商品放大镜效果
Jan 12 Javascript
详解如何在vue项目中引入elementUI组件
Feb 11 Javascript
解决vue 引入子组件报错的问题
Sep 06 Javascript
js字符串处理之绝妙的代码
Apr 05 Javascript
js实现带积分弹球小游戏
Jul 21 Javascript
Vant 在vue-cli 4.x中按需加载操作
Nov 05 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中empty is_null和isset的测试
2013/06/29 PHP
PHP引用(&amp;)各种使用方法实例详解
2014/03/20 PHP
yii2 页面底部加载css和js的技巧
2016/04/21 PHP
基于PHP实现栈数据结构和括号匹配算法示例
2017/08/10 PHP
PHP 7.4中使用预加载的方法详解
2019/07/08 PHP
Yii2.0框架模型添加/修改/删除数据操作示例
2019/07/18 PHP
基于thinkphp5框架实现微信小程序支付 退款 订单查询 退款查询操作
2020/08/17 PHP
json的使用小结
2016/06/08 Javascript
Angular2 (RC4) 路由与导航详解
2016/09/21 Javascript
原生javascript实现分页效果
2017/04/21 Javascript
Vue 2中ref属性的使用方法及注意事项
2017/06/12 Javascript
JS表单传值和URL编码转换
2018/03/03 Javascript
vue项目开发中setTimeout等定时器的管理问题
2018/09/13 Javascript
layui关闭层级、简单监听的实例
2019/09/06 Javascript
vuex存值与取值的实例
2019/11/06 Javascript
jQuery实现的解析本地 XML 文档操作示例
2020/04/30 jQuery
在HTML中使用JavaScript的两种方法
2020/12/24 Javascript
js实现验证码干扰(动态)
2021/02/23 Javascript
JavaScript 中的执行上下文和执行栈实例讲解
2021/02/25 Javascript
Python字典操作简明总结
2015/04/13 Python
python 容器总结整理
2017/04/04 Python
python实现微信远程控制电脑
2018/02/22 Python
python学习笔记之多进程
2020/08/06 Python
Css3新特性应用之视觉效果实例
2016/12/12 HTML / CSS
详解HTML5 canvas绘图基本使用方法
2018/01/29 HTML / CSS
html5实现多图片预览上传及点击可拖拽控件
2018/03/15 HTML / CSS
香港万宁官方海外旗舰店:香港健与美连锁店
2018/09/27 全球购物
学校大课间活动方案
2014/01/30 职场文书
合伙经营协议书
2014/04/18 职场文书
期末评语大全
2014/05/04 职场文书
施工安全承诺书
2014/05/22 职场文书
大学生党性分析材料
2014/12/19 职场文书
商务邀请函
2015/01/30 职场文书
干货分享:推荐信写作技巧!
2019/06/21 职场文书
golang 在windows中设置环境变量的操作
2021/04/29 Golang
python DataFrame中stack()方法、unstack()方法和pivot()方法浅析
2022/04/06 Python