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 相关文章推荐
让网页根据不同IE版本显示不同的内容
Feb 08 Javascript
asp(javascript)全角半角转换代码 dbc2sbc
Aug 06 Javascript
基于jQuery的弹出消息插件 DivAlert之旅(一)
Apr 01 Javascript
js读取本地excel文档数据的代码
Nov 11 Javascript
按下Enter焦点移至下一个控件的实现js代码
Dec 11 Javascript
深入学习AngularJS中数据的双向绑定机制
Mar 04 Javascript
基于chosen插件实现人员选择树搜索自动筛选功能
Sep 24 Javascript
JavaScript实现图片轮播组件代码示例
Nov 22 Javascript
nuxt踩坑之Vuex状态树的模块方式使用详解
Sep 06 Javascript
vue项目中锚点定位替代方式
Nov 13 Javascript
Vue实现背景更换颜色操作
Jul 17 Javascript
关于vue-router-link选择样式设置
Apr 30 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面向对象的使用教程 简单数据库连接
2006/11/25 PHP
php DOS攻击实现代码(附如何防范)
2012/05/29 PHP
php_screw 1.5:php加密: 安装与使用详解
2013/06/20 PHP
PHP清除字符串中所有无用标签的方法
2014/12/01 PHP
PHP中substr_count()函数获取子字符串出现次数的方法
2016/01/07 PHP
jquery $.ajax入门应用二
2008/11/19 Javascript
javascript 中String.match()与RegExp.exec()的区别说明
2013/01/10 Javascript
用nodejs实现PHP的print_r函数代码
2014/03/14 NodeJs
使用javascript获取页面名称
2014/12/23 Javascript
jquery实现简单的自动播放幻灯片效果
2015/06/13 Javascript
JS实现的表格操作类详解(添加,删除,排序,上移,下移)
2015/12/22 Javascript
jQuery插件制作的实例教程
2016/05/16 Javascript
javascript的replace方法结合正则使用实例总结
2016/06/16 Javascript
微信小程序五星评分效果实现代码
2017/04/06 Javascript
微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】
2017/12/06 Javascript
Three.js 再探 - 写一个微信跳一跳极简版游戏
2018/01/04 Javascript
解决在Bootstrap模糊框中使用WebUploader的问题
2018/03/22 Javascript
微信小程序实现展示评分结果功能
2019/02/15 Javascript
Vue js 的生命周期(看了就懂)(推荐)
2019/03/29 Javascript
vue两组件间值传递 $router.push实现方法
2019/05/15 Javascript
webpack 最佳配置指北(推荐)
2020/01/07 Javascript
基于js实现的图片拖拽排序源码实例
2020/11/04 Javascript
Python的Flask框架中web表单的教程
2015/04/20 Python
Python3匿名函数用法示例
2018/07/25 Python
tensorflow 查看梯度方式
2020/02/04 Python
Python OpenCV实现测量图片物体宽度
2020/05/27 Python
Python如何截图保存的三种方法(小结)
2020/09/01 Python
python3.9和pycharm的安装教程并创建简单项目的步骤
2021/02/03 Python
纯CSS3实现手风琴风格菜单具体步骤
2013/05/06 HTML / CSS
美国嘻哈文化生活方式品牌:GLD
2018/04/15 全球购物
党员一句话承诺大全
2014/03/28 职场文书
民主评议党员登记表自我评价
2014/10/20 职场文书
2014年党风廉政建设工作总结
2014/11/19 职场文书
2014年销售工作总结
2014/12/01 职场文书
爱的承诺书
2015/01/20 职场文书
淘宝客服专员岗位职责
2015/04/07 职场文书