uniapp(js)处理过去时间对比现在时间的时间差如几分钟前,几小时前,几个月前(仿照cnode社区)

先看代码,复制使用即可,不过还是建议您一边阅读,一遍整理思路,总的来说,思路很重要,其次才是代码。

您将看到以下效果

时间对比

<template>
	<view>
		发表时间 <span style="color:red">{
    
    {
    
    outTime}}</span> 是现在的 <span style="color:red">{
    
    {
    
    nowTimer | formatDate}}</span>
	</view>
</template>
<script>
	export default {
    
    
		data() {
    
    
			return {
    
    
				//一个过去时间
				outTime: '2020/09/17 10:44:10',
				nowTimer: 0
			}
		},
		created() {
    
    
			this.nowTimer = new Date(this.outTime).getTime()
		},
		filters: {
    
    

			formatDate: (nowTimer) => {
    
    
				let formats = {
    
    
					'year': '几 年前',
					'month': '几 月前',
					'day': '几 天前',
					'hour': '几 小时前',
					'minute': '几 分钟前',
					'second': '几 秒前',
				};
				//获取当前时间戳
				let now = Date.now();
				let seconds = Math.floor((now - parseInt(nowTimer)) / 1000);
				let minutes = Math.floor(seconds / 60);
				let hours = Math.floor(minutes / 60);
				let days = Math.floor(hours / 24);
				let months = Math.floor(days / 30);
				let years = Math.floor(months / 12);
				let oldType = '';
				let oldValue = 0;
				if (years > 0) {
    
    
					//几年前
					oldType = 'year';
					oldValue = years;
				} else {
    
    
					if (months > 0) {
    
    
						//几个月前
						oldType = 'month';
						oldValue = months;
					} else {
    
    
						if (days > 0) {
    
    
							//几天前
							oldType = 'day';
							oldValue = days;
						} else {
    
    
							if (hours > 0) {
    
    
								//几小时前
								oldType = 'hour';
								oldValue = hours;
							} else {
    
    
								//这里  您可以处理一个  刚刚  比如时间小于30分钟
								if (minutes > 0) {
    
    
									//几分钟前   
									oldType = 'minute';
									oldValue = minutes;
								} else {
    
    
									//几秒前 
									oldType = 'second';
									oldValue = seconds === 0 ? (seconds = 1) : seconds;
								}
							}
						}
					}
				}
				return formats[oldType].replace('几', oldValue);
			}

		}
	}
</script>

附加和可能出现的有用信息已添加注释
其他有关uniapp的疑问或者此方法不理解的地方您可留言,我会尽快回复并帮您解决。

猜你喜欢

转载自blog.csdn.net/weixin_47821281/article/details/108638666