前端页面显示的时间格式为: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) % 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;
			},

 

前端结果:

 ac40ae17c7324b26bd7b18d3768526f4.png

 

 

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

什么是前端响应式设计(responsive design)?如何实现响应式布局?

聚沙成塔每天进步一点点 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 欢迎来到前端入门之旅&#xff01;感兴趣的可以订阅本专栏哦&#xff01;这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发…

【MySQL】表的操作

表的操作 MySQL表的操作1、创建表2、创建表案例3、查看当前数据库下所有的表4、查看表结构5、查看创建表时的相关细节6、修改表7、删除表 MySQL表的操作 1、创建表 创建表的SQL语法如下&#xff1a; CREATE TABLE [IF NOT EXISTS] table_name(field1 datatype1 [COMMENT 注释…

python|获取接口请求耗时

你想知道我们请求一个url的时候&#xff0c;握手和请求资源分别占用多长时间么&#xff1f;今天我们使用python写个小案例来看看吧。 项目展示 打开项目&#xff0c;修改hosts、port、methods以及url的变量&#xff0c;即可运行python程序便可获得该页面的详细信息的时间&…

JVM虚拟机系统性学习-JVM调优之通过gceasy分析GC日志对堆、元空间、线程堆栈和垃圾回收器进行调优

通过 gceasy工具对生成的 GC 日志进行分析 这里使用的 JDK 版本为 JDK8&#xff01; 在分析 GC 日志时&#xff0c;可以同时采用多种工具&#xff08;Arthas、gceasy、JVM 连接 Graphana 监控&#xff09;进行分析&#xff0c;避免某种工具分析不准确 gceasy 每个月只可以免费…

移动滑轨屏的运用是否对传统展览展示效果产生了哪些影响?

移动滑轨屏因其独特的展示外观和形式&#xff0c;也常被人们称为滑轨电视、电动滑轨&#xff0c;主要由滑动轨道、显示屏、感应装置、控制系统等组件结合实现&#xff0c;是一种解决了传统展览内容展示局限的多功能互动装置&#xff0c;能够呈现动态内容并与用户产生互动交流&a…

【STM32】STM32学习笔记-按键控制LED 光敏传感器控制蜂鸣器(08)

00. 目录 文章目录 00. 目录01. 按键控制LED接线图02. 按键控制LED程序示例03. 光敏传感器控制Buzzer接线图04. 有源蜂鸣器原理图05. 光敏传感器控制Buzzer示例06. 程序示例下载07. 附录 01. 按键控制LED接线图 02. 按键控制LED程序示例 led.h #ifndef __LED_H__ #define __L…

Leetcode—896.单调数列【简单】

2023每日刷题&#xff08;五十九&#xff09; Leetcode—896.单调数列 实现代码 class Solution { public:bool isMonotonic(vector<int>& nums) {int up 0;int down 0;if(nums.size() 1) {return true;}for(int i 0; i < nums.size() - 1; i) {if(nums[i] …

github 学习番外篇

我们可以按照仓库开始的提示提交仓库 不知道为什么 出现了 我用 git branch 查看了一下&#xff0c;竟然没发现分支 后来发现是只有commit以后才会显示这个分支 后来显示 这是因为本地和远程仓库不同步的原因 这时候我们就需要git pull 一下 发现两个仓库由于不关联不能git…

未命名文章分布式系统理论基础: 时间、时钟和事件顺序

目录 物理时钟 vs 逻辑时钟 Lamport timestamps Vector clock Version vector 小结 转自&#xff1a;https://www.cnblogs.com/bangerlee/p/5448766.html 该系列博文会告诉你什么是分布式系统&#xff0c;这对后端工程师来说是很重要的一门学问&#xff0c;我们会逐步了解分布式…

Axie Infinity 之后,Ronin 的潜力何在?

作者&#xff1a;stellafootprint.network 数据来源&#xff1a;Ronin Dashboard 备受欢迎的 Web3 游戏 Pixels 在 2023 年 10 月下旬从 Polygon 迁移到了专为游戏设计的区块链 Ronin。Pixels 此前作为 Polygon 上活跃用户&#xff08;钱包数量&#xff09;最多的 Web3 游戏&…

scrapy post请求——百度翻译(十四)

scrapy处理 post 请求 爬取百度翻译界面 目录 1.创建项目及爬虫文件 2.发送post请求 1.创建项目及爬虫文件 scrapy startproject scrapy_104 scrapy genspider translate fanyi.baidu.com 2.发送请求 post请求需要传递参数&#xff0c;所以就不能用start_urls和parse函数了&…

系统架构设计师教程(六)数据库设计基础知识

数据库设计基础知识 6.1 数据库基本概念6.1.1 数据库技术的发展6.1.2 数据模型6.1.3 数据库管理系统DBMS功能DBMS 的特点 6.1.4 数据库三级模式 6.2 关系数据库6.2.1 关系数据库基本概念关系的基本术语关系数据库模式关系的完整性约束 6.2.2 关系运算6.2.3 关系数据库设计基本理…

Android修改submodule的lib包名

一、正常使用submodule的流程 在指定路径下&#xff1a; git clone gitgit.youraddress.com:android-apps/taobao.git cd taobao/ git checkout develop git submoudle init git submodule update二、改名步骤 需求&#xff1a;将LibStat改为libStat 因为Linux对大小写敏感…

数据结构之---- 排序算法

数据结构之---- 排序算法 什么是排序算法&#xff1f; 排序算法用于对一组数据按照特定顺序进行排列。 排序算法有着广泛的应用&#xff0c;因为有序数据通常能够被更有效地查找、分析和处理。 如图所示&#xff0c;排序算法中的数据类型可以是整数、浮点数、字符或字符串等…

张驰咨询:从零到一领略六西格玛管理的魅力

在高速发展的商业竞技场上&#xff0c;卓越的运营不仅要求高质量的产品与服务&#xff0c;还需要组织内外的协同合作和极致的客户满意度。这正是六西格玛方法论所关注的焦点——通过跨部门的团队合作与数据驱动的决策&#xff0c;实现流程的连续改进&#xff0c;持续推动企业向…

【Hive】——DDL(PARTITION)

1 增加分区 1.1 添加一个分区 ALTER TABLE t_user_province ADD PARTITION (provinceBJ) location/user/hive/warehouse/test.db/t_user_province/provinceBJ;必须自己把数据加载到增加的分区中 hive不会帮你添加 1.2 一次添加多个分区 ALTER TABLE table_name ADD PARTITION…

Android解决报错 superclass access check failed: class

Android解决报错 superclass access check failed: class 前言&#xff1a; 最近在打开之前的项目demo时&#xff0c;出现一个错误Cause: superclass access check failed: class butterknife.compiler.ButterKnifeProcessor$RScanner 1.错误信息如下&#xff1a; Executio…

随笔:AI PC这概念要“跑得快”,可能还是得看英特尔

来源 | 购机帮你评 作者 | 牛大叔 最近&#xff0c;PC圈儿都在热炒AI PC概念&#xff0c;无论是英特尔、AMD&#xff0c;还是PC厂商&#xff0c;都在大力宣传AI PC&#xff0c;意思大概是“AI PC是个人电脑未来的发展方向”。所以自然而然的&#xff0c;大家就开始热议一个话题…

PPT插件-超好用的插件-统一尺寸、裁剪、分布-大珩助手

超级对齐-统一尺寸、裁剪、分布 操作方法 先选中1个或多个形状&#xff0c;然后最后选择目标形状&#xff0c;若希望形状的位置也改变&#xff0c;则需要在对齐幻灯下选中对齐对象。 等比缩放 将选中的1个或多个形状的外形尺寸设置为目标形状大小&#xff0c;图像的纵横比可…

YOLOv8优化策略:UniRepLKNetBlock 助力检测 | UniRepLKNet,通用感知大内核卷积网络,2023.12

🚀🚀🚀本文改进: UniRepLKNet,通用感知大内核卷积网络,ImageNet-22K预训练,精度 和速度SOTA,ImageNet达到88%, COCO达到56.4 box AP,ADE20K达到55.6 mIoU UniRepLKNetBlock 与C2f进行结合使用 🚀🚀🚀YOLOv8改进专栏:http://t.csdnimg.cn/hGhVK 学姐带你学…
最新文章