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 相关文章推荐
(currentStyle)javascript为何有时用style得不到已设定的CSS的属性
Aug 15 Javascript
javascript json 新手入门文档
Dec 03 Javascript
js实现连续英文字符自动换行兼容ie6 ie7和firefox
Sep 06 Javascript
浅谈Javascript数组的使用
Jul 29 Javascript
angular分页指令操作
Jan 09 Javascript
canvas实现图片根据滑块放大缩小效果
Feb 24 Javascript
常见的浏览器Hack技巧整理
Jun 29 Javascript
js的函数的按值传递参数(实例讲解)
Nov 16 Javascript
jQuery实现B2B网站后台管理系统侧导航
Jul 08 jQuery
解决vue 退出动画无效的问题
Aug 09 Javascript
关于Node.js中频繁修改代码重启服务器的问题
Oct 15 Javascript
JavaScript实现登录窗体
Jun 22 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实现redis限制单ip、单用户的访问次数功能示例
2018/06/16 PHP
PHP面向对象程序设计之对象克隆clone和魔术方法__clone()用法分析
2019/06/12 PHP
Windows平台PHP+IECapt实现网页批量截图并创建缩略图功能详解
2019/08/02 PHP
jquery.autocomplete修改实现键盘上下键自动填充示例
2013/11/19 Javascript
AngularJS表单编辑提交功能实例
2015/02/13 Javascript
js图片模糊切换显示特效的方法
2015/02/17 Javascript
javascript实现简单的省市区三级联动
2015/05/14 Javascript
JQuery+Ajax实现数据查询、排序和分页功能
2015/09/27 Javascript
简单谈谈JavaScript的同步与异步
2015/12/31 Javascript
javascript实现图片左右滚动效果【可自动滚动,有左右按钮】
2016/09/19 Javascript
easyui tree带checkbox实现单选的简单实例
2016/11/07 Javascript
Node.js  REPL (交互式解释器)实例详解
2017/08/06 Javascript
React-intl 实现多语言的示例代码
2017/11/03 Javascript
vue.js实现只弹一次弹框
2018/01/29 Javascript
JavaScript实现的简单加密解密操作示例
2018/06/01 Javascript
微信小游戏之使用three.js 绘制一个旋转的三角形
2019/06/10 Javascript
es6数组之扩展运算符操作实例分析
2020/04/25 Javascript
Vue路由权限控制解析
2020/11/09 Javascript
JavaScript缓动动画函数的封装方法
2020/11/25 Javascript
[48:18]DOTA2-DPC中国联赛 正赛 RNG vs Dynasty BO3 第二场 1月29日
2021/03/11 DOTA
python基础教程之数字处理(math)模块详解
2014/03/25 Python
Python内置数据结构与操作符的练习题集锦
2016/07/01 Python
python 通过可变参数计算n个数的乘积方法
2019/06/13 Python
详解解决jupyter不能使用pytorch的问题
2021/02/18 Python
美国知名的女性服饰品牌:LOFT(洛芙特)
2016/08/05 全球购物
新加坡交友网站:be2新加坡
2019/04/10 全球购物
元旦晚会上单位领导演讲稿
2014/01/05 职场文书
关于母亲节的感言
2014/02/04 职场文书
仓库文员岗位职责
2014/04/06 职场文书
大学生应聘导游自荐信
2014/06/02 职场文书
法定代表人授权委托书
2014/09/19 职场文书
社区节水倡议书
2015/04/29 职场文书
干货分享:推荐信写作技巧!
2019/06/21 职场文书
初中运动会闭幕词范本3篇
2019/12/09 职场文书
Python基础之元类详解
2021/04/29 Python
详解jQuery的核心函数和事件处理
2022/02/18 jQuery