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

news2024/11/15 15:25:18

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

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

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

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

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

解决方法:使用 new Date() 

后端数据:

 

前端处理:

//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) % 24
				var minute = parseInt(diff / 1000 / 60) % 60
				var second = parseInt(diff / 1000) % 60
				console.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;
			},

 

前端结果:

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1311441.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

PFA容量瓶应用工业制造领域PFA定容瓶精确测量的重要性

容量瓶是保证科学、医学和工业等各个领域精确测量的重要工具。这些专门的容量瓶被设计用来在特定的温度下保持精确的液体体积&#xff0c;使它们成为在工作中需要高精确度的专业人士不可或缺的工具。在这份容量瓶终极指南中&#xff0c;今天我们来探讨下这些仪器的重要性&#…

ios苹果app应用程序录屏开发有哪些难点和注意点?

Hello&#xff0c;各位同学们好&#xff0c;我是咕噜铁蛋&#xff0c;老朋友们应该知道我经常关注并分享各种移动应用开发的技术和经验。在这篇文章中&#xff0c;铁蛋将为大家介绍分享苹果iOS录屏开发的难点和注意点&#xff01; 首先&#xff0c;让我们简单了解一下iOS录屏的…

如何在 Eolink Apikit 中发起 TCP/UDP 文档测试

TCP/UDP 是两种常用的网络传输协议。TCP 协议提供可靠的连接&#xff0c;而 UDP 协议提供不可靠的连接。 TCP 协议是面向连接的协议&#xff0c;在建立连接之前&#xff0c;客户端和服务器需要先握手。握手完成后&#xff0c;客户端和服务器之间就会建立一个可靠的连接。在连接…

记录今日将C语言的Windows程序更改为python语言Windows程序,实现子窗口控制,类似微信程序框架最简单的原型

基本思路 为什么要选择python制作Windows应用程序&#xff0c;主要就是源代码直接展示&#xff0c;发现问题随时修改&#xff0c;同时可以不断增加新的功能方便。 由于C语言的Windows程序中结构类型在python中不能使用&#xff0c; 因此我们按照ctypes模块指导意见继承structu…

微服务技术 RabbitMQ SpringAMQP P61-P76

B站学习视频https://www.bilibili.com/video/BV1LQ4y127n4?p61&vd_source8665d6da33d4e2277ca40f03210fe53a 文档资料: 链接&#xff1a;https://pan.baidu.com/s/1P_Ag1BYiPaF52EI19A0YRw?pwdd03r 提取码&#xff1a;d03r 一 初始MQ 1. 同步通讯 2. 异步通讯 3. MQ常…

低代码与自动化:加速软件开发的新趋势

低代码与自动化技术正在逐渐改变软件开发的面貌。随着科技的不断发展&#xff0c;传统的编程方式已经不再是唯一的选择。低代码和自动化技术正在为开发者提供更高效、更灵活的开发环境&#xff0c;使得软件开发变得更加简单、快速和高效。 低代码和自动化技术正在逐渐改变软件开…

理解JSX:提高前端开发效率的关键(上)

&#x1f90d; 前端开发工程师&#xff08;主业&#xff09;、技术博主&#xff08;副业&#xff09;、已过CET6 &#x1f368; 阿珊和她的猫_CSDN个人主页 &#x1f560; 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 &#x1f35a; 蓝桥云课签约作者、已在蓝桥云…

百度搜索展现服务重构:进步与优化

作者 | 瞭东 导读 本文将简单介绍搜索展现服务发展过程&#xff0c;以及当前其面临的三大挑战&#xff1a;研发难度高、架构能力欠缺、可复用性低&#xff0c;最后提出核心解决思路和具体落地方案&#xff0c;期望大家能有所收货和借鉴。 全文4736字&#xff0c;预计阅读时间12…

高级C#技术(二)

前言 本章为高级C#技术的第二节也是最后一节。前一节在下面这个链接 高级C#技术https://blog.csdn.net/qq_71897293/article/details/134930989?spm1001.2014.3001.5501 匿名类型 匿名类型如其名&#xff0c;匿名的没有指定变量的具体类型。 举个例子&#xff1a; 1 创建…

MySQL数据库,视图、存储过程与存储函数

数据库对象&#xff1a; 常见的数据库对象&#xff1a; 视图&#xff1a; 视图是一种虚拟表&#xff0c;本身是不具有数据的占用很少的内存空间。 视图建立在已有表的基础上&#xff0c;视图赖以建立的这些表称为基表。 视图的创建和删除只影响视图本身&#xff0c;不影响对…

案例058:基于微信小程序的智能社区服务管理系统

文末获取源码 开发语言&#xff1a;Java 框架&#xff1a;SSM JDK版本&#xff1a;JDK1.8 数据库&#xff1a;mysql 5.7 开发软件&#xff1a;eclipse/myeclipse/idea Maven包&#xff1a;Maven3.5.4 小程序框架&#xff1a;uniapp 小程序开发软件&#xff1a;HBuilder X 小程序…

计算机设计大赛信息可视化设计的获奖经验剖析解读—基于本专栏文章助力4C大赛【全网最全万字攻略-获奖必读】

文章目录 一.中国大学生计算机设计大赛1.1赛道解读1.2 信息可视化设计小类介绍1.2 小类区别解读 二.信息可视化设计赛道获奖经验2.1 四小类作品预览2.1.1 数据可视化小类-优秀参赛作品展览2.1.2 信息图形设计小类-优秀参赛作品展览2.1.3 动态信息影像&#xff08;MG动画&#x…

2024免费mac苹果电脑系统电脑管家CleanMyMac X

macOS已经成为最受欢迎的桌面操作系统之一&#xff0c;它提供了直观、简洁的用户界面&#xff0c;使用户可以轻松使用和管理系统。macOS拥有丰富的应用程序生态系统&#xff1b;还可以与其他苹果产品和服务紧密协作&#xff0c;如iPhone、iPad&#xff0c;用户可以通过iCloud同…

理解JSX:提高前端开发效率的关键(下)

&#x1f90d; 前端开发工程师&#xff08;主业&#xff09;、技术博主&#xff08;副业&#xff09;、已过CET6 &#x1f368; 阿珊和她的猫_CSDN个人主页 &#x1f560; 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 &#x1f35a; 蓝桥云课签约作者、已在蓝桥云…

spring 笔记五 SpringMVC的数据响应

文章目录 SpringMVC的数据响应SpringMVC的数据响应方式回写数据 SpringMVC的数据响应 SpringMVC的数据响应方式 页面跳转 直接返回字符串通过ModelAndView对象返回 回写数据 直接返回字符串返回对象或集合 返回字符串形式 直接返回字符串&#xff1a;此种方式会将返回的字符…

nodejs+vue+微信小程序+python+PHP血液中心管理平台的设计与实现-计算机毕业设计推荐

实现采血的完整功能&#xff0c;系统用户主要分为两类&#xff0c;一类是管理员&#xff0c;一类是采血工作人员。管理员主要对采血工作人员以及血库进行管理。派发账号给员工作为采血工作人员&#xff0c;对血库的出库入库进行信息化管理。采血工作人员主要完成采血工作。通过…

jmeter,通过Ant插件生成html报告,展示接口详细信息

一、下载Ant 下载地址&#xff1a;Apache Ant - 二进制发行版 二、安装 1、Ant环境变量 解压Ant目录&#xff1b;配置系统环境变量&#xff0c;添加ANT_PATH&#xff0c;值为D:\Software\Ant_plugIn\apache-ant-1.10.14配置系统环境变量Path&#xff0c;添加Ant路径 %ANT_H…

MyBatisPlus基础入门笔记

MyBatisPlus基础入门笔记&#xff0c;源码可见下载链接 大家阅读时可善用目录功能&#xff0c;可以提高大家的阅读效率 下载地址&#xff1a;MyBatisPlus源码笔记 初识MyBatisPlus 入门案例 SpringBoot整合MyBatis&#xff08;复习&#xff09; 创建SpringBoot工程勾选使用的…

设计模式——适配器模式(结构型)

引言 适配器模式是一种结构型设计模式&#xff0c; 它能使接口不兼容的对象能够相互合作。 问题 假如你正在开发一款股票市场监测程序&#xff0c; 它会从不同来源下载 XML 格式的股票数据&#xff0c; 然后向用户呈现出美观的图表。 在开发过程中&#xff0c; 你决定在程序…

使用qt实现四则运算计算机项目

这是我们要包含的头文件 #include <QWidget> #include<QStack> #include<string.h> #include<string> 这是我在ui界面创建的计算机基础框架。 接下来要实现按住每个按钮在白框内显示&#xff1b; 因此我们要定义一个QString 类型的变量 QString e…