Vue 按照创建时间和当前时间显示操作(刚刚,几小时前,几天前)-6ren

Vue 按照创建时间和当前时间显示操作(刚刚,几小时前,几天前)

转载作者：qq735679552 更新时间：2022-09-29 22:32:09

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章Vue 按照创建时间和当前时间显示操作(刚刚,几小时前,几天前)由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

在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) 
        
         }

内容小结。

又是一个小功能的实现，一边记录下自己的代码，一边和大家分享平时代码的点滴，希望能给大家一个参考，也希望大家多多支持我.

原文链接：https://blog.csdn.net/z772330927/article/details/106229374 。

最后此篇关于Vue 按照创建时间和当前时间显示操作(刚刚,几小时前,几天前)的文章就讲到这里了,如果你想了解更多关于Vue 按照创建时间和当前时间显示操作(刚刚,几小时前,几天前)的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！。

文章推荐： vue 使用lodash实现对象数组深拷贝操作

文章推荐： Docker阿里云RocketMQ 4.5.1部署流程详解

文章推荐： JS取得绝对路径的实现代码

文章推荐： vue 导出文件,携带请求头token操作

java - Struts2 操作 > JSP > 操作
我正在努力做到这一点在我的操作中从数据库获取对象列表(确定) 在 JSP 上打印(确定) 此列表作为 JSP 中的可编辑表出现。我想修改然后将其提交回同一操作以将其保存在我的数据库中(失败。当我使用
linq - 不支持嵌套查询。操作 1 ='UnionAll' 操作 2 ='MultiStreamNest'
我有以下形式的 Linq to Entities 查询: var x = from a in SomeData where ... some conditions ... select
c# - 不支持嵌套查询。操作 1 ='UnionAll' 操作 2 ='MultiStreamNest'
我有以下查询。 var query = Repository.Query() .Where(p => !p.IsDeleted && p.Article.ArticleSections.Cou
java - Jtable ListSelectionListener 不响应 jtable 操作，而是响应同一个类中的另一个 jtable 操作
我正在编写一个应用程序包，其中包含一个主类，其中主方法与GUI类分开，GUI类包含一个带有jtabbedpane的jframe，它有两个选项卡，第一个选项卡包含一个jtable，称为jtable1，第
c# - LINQ 嵌套数组和三元运算符。不支持嵌套查询。操作 1 ='Case' 操作 2 ='Collect'
以下代码产生错误 The nested query is not supported. Operation1='Case' Operation2='Collect' 问题是我做错了什么？我该如何解决？
Redis哨兵中的C#操作
我已经为 HA redis 集群(2 个副本、1 个主节点、3 个哨兵)设置了本地 docker 环境。只有哨兵暴露端口(10021、10022、10023)。我使用的是 stackexchange
液体模板过滤器中的日期数学/操作
我正在 Desk.com 中构建一个“集成 URL”，它使用 Shopify Liquid 模板过滤器语法。对于开始日期为 7 天前而结束日期为现在的查询，此 URL 需要包含“开始日期”和“结束日期
Python为什么不支持 i++/i--操作
你一定想过。然而情况却不理想，python中只能使用类似于 i++/i--等操作。 python中的自增操作下面代码几乎是所有程序员在python中进行自增(减)操作的常用
GitHub 操作 - 将分支名称显示为构建名称
我需要在每个使用 github 操作的手动构建中显示分支。例如:https://gyazo.com/2131bf83b0df1e2157480e5be842d4fb 我应该显示分支而不是一个。最佳答
Perl qr//操作
我有一个关于 Perl qr 运算符的问题: #!/usr/bin/perl -w &mysplit("a:b:c", /:/); sub mysplit { my($str, $patt
uml - ArgoUML 操作
我已经使用 ArgoUML 创建了一个 ERD(实体关系图)，我希望在一个类中创建两个操作，它们都具有 void 返回类型。但是，我只能创建一个返回 void 类型的操作。例如: 我能够将 book
关于拉取请求和主分支的 Github 操作
Github 操作仍处于测试阶段并且很新，但我希望有人可以提供帮助。我认为可以在主分支和拉取请求上运行 github 操作，如下所示: on: pull_request push: b
用于记录的 Twilio 操作
我正在尝试创建一个 Twilio 工作流来调用电话并记录用户所说的内容。为此，我正在使用 Record，但我不确定要在 action 参数中放置什么。尽管我知道 Twilio 会发送有关调用该 UR
OpenGL 模板缓冲区 OR 操作？
我不确定这是否可行，但值得一试。我正在使用模板缓冲区来减少使用此算法的延迟渲染器中光体积的过度绘制(当相机位于体积之外时): 使用廉价的着色器，将深度测试设置为 LEQUAL 绘制背面，将它们标记在模
用于复制和重命名文件的 GitHub 操作
有没有聪明的方法来复制和重命名文件通过 GitHub 操作？我想将一些自述文件复制到 /docs文件夹(:= 同一个 repo，不是远程的!)，它们将根据它们的 frontmatter 重命名
PowerShell CSV 操作
我有一个 .csv 文件，其中第一列包含用户名。它们采用 FirstName LastName 的形式。我想获取 FirstName 并将 LastName 的第一个字符添加到它上面，然后删除空格。然
Sitecore - 操作 URL
Sitecore 根据 Sitecore 树中定义的项目名称生成 URL， http://samplewebsite/Pages/Sample Page 但我们的客户有兴趣降低所有 URL(页面/示例
单击按钮时的 Angularjs 操作
我正在尝试进行一些计算，但是一旦我输入金额，它就会完成。我只是希望通过单击按钮而不是自动发生这种情况。到目前为止我做了什么: Angular JS - programming-fr
将文件从一个存储库复制到另一个存储库的 github 操作
我的公司创建了一种在环境之间移动文件的复杂方法，现在我们希望将某些构建的 JS 文件(已转换和缩小)从一个 github 存储库移动到另一个。使用 github 操作可以实现这一点吗？最佳答案最简
java - JSONArray 操作
在我的代码中，我创建了一个 JSONArray 对象。并向 JSONArray 对象添加了两个 JSONObject。我使用的是 json-simple-1.1.jar。我的代码是 package j

qq735679552

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

Vue 按照创建时间和当前时间显示操作(刚刚,几小时前,几天前)