当前位置: 首页 > news >正文

前端页面显示的时间格式为:2022-03-18T01:46:08.000+00:00 如何转换为:年-月-日,并根据当前时间判断为几天前

由于后端每条博文的发表时间是以“xxxx—xx—xxxx:xx:xx”的形式显示的,

现在要在前端改成“xxxx年xx月xx日”的形式。

并对10分钟内发表的显示“刚刚”,对24小时内发表的显示“小时前”。

超过24小时,小于48小时,显示“1天前”。

超过了48小时则显示“xxxx 年xx月xx日”。

解决方法:使用 new Date() 

 

后端数据:

b3289db3829640d0aaca5704b4ba82c1.png 

前端处理:

//methods获取后端数据
showBlogs(){uni.request({url:"http://localhost:8000/blog/getPageBlogs",method:"POST",data:{pageNum:this.pageNum,pageSize:8},success: (res) => {//console.log(res.data);//参见接口规范中的返回值示例let tempblogs = res.data.message.records;for(let blog of tempblogs){if(blog.thumbnail == null){//没有缩略图,则给一张默认图片blog.thumbnail = "/static/log.png";}if (blog.posttime != null){let posttimes = blog.posttime;blog.posttime = this.transformTime(posttimes);console.log("转化为年月日:", blog.posttime)}}//...是展开运算符,将tempblogs数组中元素一一取出this.blogs.push(...tempblogs);}}); // end of uni.request()
//时间改进transformTime(times){var date = new Date(times);console.log("上传时间为:", date)var Y = date.getFullYear(); //年var M = date.getMonth() + 1; //月var D = date.getDate(); //日var h = date.getHours(); //时var m = date.getMinutes(); //分var s = date.getSeconds(); //秒var nowdate = new Date();console.log("现在时间为:", nowdate);var diff = Math.abs(nowdate - date)//console.log("相差时间:", diff);var day = parseInt(diff / 1000 / 60 / 60 / 24)var hour = parseInt(diff / 1000 / 60 / 60) % 24var minute = parseInt(diff / 1000 / 60) % 60var second = parseInt(diff / 1000) % 60console.log('相差'+day+'天'+hour+'小时'+minute+'分钟'+second+'秒');var finaltime; //最终时间if (minute < 10){finaltime = "刚刚";} else if (day <= 1){finaltime = hour + "小时前";} else if (day > 1 && day <= 2){finaltime = "1天前";} else {finaltime = Y + "年" + M + "月" + D + "日";}return finaltime;},

 

前端结果:

 ac40ae17c7324b26bd7b18d3768526f4.png

 

 

http://www.lryc.cn/news/260330.html

相关文章:

  • UniGui使用CSS移动端按钮标题垂直
  • 0-50KHz频率响应模拟量高速信号隔离变送器
  • Linux系统下CPU性能问题分析案例
  • 【网络协议】LACP(Link Aggregation Control Protocol,链路聚合控制协议)
  • MATLAB 2018一本通 学习笔记一
  • 文献计量学方法与应用、主题确定、检索与数据采集、VOSviewer可视化绘图、Citespace可视化绘图、R语言文献计量学绘图分析
  • C#生成微信支付的Authorization签名认证
  • 平台工程与 DevOps 和 SRE 有何不同?
  • 算法-只出现一次的数字集合
  • Linux,Web网站服务(一)
  • Monkey工具之fastbot-iOS实践
  • 我想当个程序员
  • ACM32如何保护算法、协议不被破解或者修改
  • Android Studio(Flutter)常用快捷键
  • CSS特效030:日蚀动画
  • 746.使用最小花费爬楼梯
  • 【业务功能篇132】生产环境中出现oom问题,排查思路
  • 如何将html网页免费转为excel?
  • 手撕分布式缓存---HTTP Server搭建
  • 2. PyTorch——Tensor和Numpy
  • C#随笔 | List.Sort()使用小计
  • 【WebRTC】用WebRTC做即时视频聊天应用
  • GPT-4.5 要来了!谷歌大模型 Gemini 确实给够压力
  • 美易官方:加密资产将破坏金融稳定,无法取消就要加强监管
  • 一文读懂Java中的设计模式——适配器模式,对于兼容不同系统特别适用!
  • 2023年国内外评分前十的项目管理软件推荐
  • 3.electron之vue3.0的桌面应用程序
  • 数字图像处理(实践篇)二十二 使用opencv进行人脸、眼睛、嘴的检测
  • 旺店通·企业奇门对接打通金蝶云星空查询仓库接口与仓库新增接口
  • PostgreSQL获取以前的时间