【仿微信朋友圈时间，几天前，几分钟前，显示几周前】

小坚果_

已于 2022-06-16 10:04:52 修改

阅读量2.4k

点赞数

文章标签： javascript

于 2022-06-15 11:27:40 首次发布

本文链接：https://blog.csdn.net/m0_61702149/article/details/125293771

版权

本文介绍了如何使用JavaScript在不同场景下灵活转换时间戳，从分钟到周、月、年，适应微信朋友圈排版需求，包括timeconvert、timeconvert1和timeconvert2方法的详细实现。

摘要由CSDN通过智能技术生成

先说js文件

每个方法显示的不一样，有显示几天前，几分钟几小时前的，有显示几周前的，看着调用

let time = {

	timeconvert(event) {
		// const enventTime = 1637593562000
		const enventTime = event
		const oneTime = 86400000 //一天的时间戳
		//当前时间戳
		const start = new Date(new Date().toLocaleDateString()).getTime()
		//某一天时间戳
		const end = new Date(this.formatDate(enventTime)).getTime()
		let timec = (start - end) / oneTime
		let dqTime = ''
		var time = new Date(enventTime);
		var y = time.getFullYear(); //年
		var m = time.getMonth() + 1; //月
		var d = time.getDate(); //日
		var h = time.getHours(); //时
		var mm = time.getMinutes(); //分
		var day = time.getDay(); //获取星期
		m = m < 10 ? '0' + m : m
		d = d < 10 ? '0' + d : d
		h = h < 10 ? '0' + h : h
		mm = mm < 10 ? '0' + mm : mm
		var weeks = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
		var xinqi = weeks[day];
		if (timec == 0) { //今天的消息
			dqTime = h + ':' + mm
		} else if (timec == 1) { //昨天消息
			dqTime = '昨天'
		} else if (timec > 1 && timec < 8) { //显示周几
			dqTime = xinqi
		} else if (y == this.getLocalTime().y && timec > 7) { //显示月日
			dqTime = m + '月' + d + '日'
		} else { //显示年月日
			dqTime = y + '年' + m + '月' + d + '日'
		}
		return dqTime
	},
	timeconvert1(event) {
		const enventTime = event
		const oneTime = 86400000 //一天的时间戳
		//当前时间戳
		const start = new Date(new Date().toLocaleDateString()).getTime()
		//某一天时间戳
		const end = new Date(this.formatDate(enventTime)).getTime()
		let timec = (start - end) / oneTime
		let dqTime = ''
		var time = new Date(enventTime);
		var y = time.getFullYear(); //年
		var m = time.getMonth() + 1; //月
		var d = time.getDate(); //日
		var h = time.getHours(); //时
		var mm = time.getMinutes(); //分
		var day = time.getDay(); //获取星期
		m = m < 10 ? '0' + m : m
		d = d < 10 ? '0' + d : d
		h = h < 10 ? '0' + h : h
		mm = mm < 10 ? '0' + mm : mm
		var weeks = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
		var xinqi = weeks[day];
		if (timec == 0) { //今天的消息
			// dqTime = h + ':' + mm
			let dateObj = new Date()
			let nowH = dateObj.getHours();
			let nowM = dateObj.getMinutes();
			let timeMin = (nowH - h) * 60 + nowM - mm
			if (timeMin >= 60) {
				dqTime = Math.floor(timeMin / 60) + "小时前";
			} else {
				if (timeMin == 0) {
					dqTime = 1 + "分钟前";
				} else {
					dqTime = timeMin + "分钟前";
				}
			}
		} else if (timec == 1) { //昨天消息
			dqTime = '昨天'
		} else if (timec > 1 && timec < 60) { //显示周几
			dqTime = timec + '天前'
		} else if (y == this.getLocalTime().y && timec > 7) { //显示月日
			dqTime = m + '月' + d + '日'
		} else { //显示年月日
			dqTime = y + '年' + m + '月' + d + '日'
		}
		return dqTime
	},
	timeconvert2(event) {
		const enventTime = event
		const oneTime = 86400000 //一天的时间戳
		//当前时间戳
		const start = new Date(new Date().toLocaleDateString()).getTime()
		//某一天时间戳
		const end = new Date(this.formatDate(enventTime)).getTime()
		let timec = (start - end) / oneTime
		let dqTime = ''
		var time = new Date(enventTime);
		var y = time.getFullYear(); //年
		var m = time.getMonth() + 1; //月
		var d = time.getDate(); //日
		var h = time.getHours(); //时
		var mm = time.getMinutes(); //分
		var day = time.getDay(); //获取星期
		m = m < 10 ? '0' + m : m
		d = d < 10 ? '0' + d : d
		h = h < 10 ? '0' + h : h
		mm = mm < 10 ? '0' + mm : mm
		var weeks = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
		var xinqi = weeks[day];
		if (timec == 0) { //今天的消息
			dqTime = '今天';
		} else if (timec == 1) { //昨天消息
			dqTime = '昨天';
		} else if (y == this.getLocalTime().y && timec > 1) { //显示月日
			dqTime = m + '月' + d;
		} else { //显示年月日
			dqTime = y + '年' + m + '年' + d;
		}
		return dqTime
	},
	formatDate(date) {
		var time = new Date(date);
		var y = time.getFullYear(); //年
		var m = time.getMonth() + 1; //月
		var d = time.getDate(); //日
		return y + '/' + m + '/' + d
	},
	//获取当前时间
	getLocalTime() {
		var time = new Date();
		var y = time.getFullYear();
		var m = time.getMonth() + 1;
		var d = time.getDate();
		var h = time.getHours();
		var mm = time.getMinutes();
		var s = time.getSeconds();
		let times = {
			y,
			m,
			d,
			h,
			mm,
			s
		}
		// let times = y + '-' + m + '-' + d + ' ' + h + ':' + mm + ':' + s
		return times
	},
	gettime(data){
		// const enventTime = 1637593562000
		const enventTime = parseInt(data)
		const oneTime = 86400000 //一天的时间戳
		//当前时间戳
		const start = new Date(new Date().toLocaleDateString()).getTime()
		//某一天时间戳
		const end = new Date(this.formatDate(enventTime)).getTime()
		let timec = (start - end) / oneTime
		let dqTime = ''
		var time = new Date(enventTime);
		var y = time.getFullYear(); //年
		var m = time.getMonth() + 1; //月
		var d = time.getDate(); //日
		var h = time.getHours(); //时
		var mm = time.getMinutes(); //分
		var day = time.getDay(); //获取星期
		m = m < 10 ? '0' + m : m
		d = d < 10 ? '0' + d : d
		h = h < 10 ? '0' + h : h
		mm = mm < 10 ? '0' + mm : mm
		var weeks = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
		var xinqi = weeks[day];
		if (timec == 0) { //今天的消息
			dqTime = h + ':' + mm
		} else if (timec == 1) { //昨天消息
			dqTime = '昨天'+ h + ':' + mm
		} else if (timec > 1 && timec < 8) { //显示周几
			dqTime = xinqi + h + ':' + mm
		} else if (y == this.getLocalTime().y && timec > 7) { //显示月日
			dqTime = m + '月' + d + '日'+ h + ':' + mm
		} else { //显示年月日
			dqTime = y + '年' + m + '月' + d + '日'+ h + ':' + mm
		}
		return dqTime
	}
}

export default time

在需要的界面调用，以及使用

import time from "../../request/time";

time.timeconvert2( Date.parse( new Date(this.publishTime) ) )

里边第二方法是符合微信里边个人朋友圈排版

年份放上边,月和日样式都不一样,所以我才写了两个年,没写月,方便后便切割

// 处理时间
handleTime() {
	let arrTime = []
	this.list.forEach(v => {
		let Time = (v.createAt).replace(/-/g, '/');
		arrTime.push(time.timeconvert2(Date.parse(new Date(Time))))
	})
	arrTime.forEach((v, i) => {
		if (v.match(/年/)) {
			arrTime.splice(i, 1, {
			 'year': [...v.split('年')]
		    })
		} else if (v.match(/月/)) {
			arrTime.splice(i, 1, {
			 'mouth': [...v.split('月')]
			})
		}
	})
	this.arrTime = arrTime;
},

// html部分代码
<view class="yearTop" v-if="arrTime[index].year">
	{{arrTime[index].year[0]}}年
</view>
<view class="post-left">
	<view class="timestamp">
		<view v-if="arrTime[index].year">
			<text class="tDay">
				{{arrTime[index].year[2]}}
			</text>
			<text class="tMouth">
				{{arrTime[index].year[1]}}月
			</text>
		</view>
		<view v-else-if="arrTime[index].mouth">
			<text class="tDay">
				{{arrTime[index].mouth[1]}}
			</text>
			<text class="tMouth">
				{{arrTime[index].mouth[0]}}月
			</text>
		</view>
		<view v-else>
			<text class="tRecent">
				{{arrTime[index]}}
			</text>
		</view>
	</view>
</view>