聊天时间提示展示

迈不过友情╰ 2022-10-22 14:50 2阅读 0赞

<!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="utf-8">
    		<meta name="divport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    		<meta name="format-detection" content="telephone=no">
    		<title>测试</title>
    		<style type="text/css">
    
    		</style>
    	</head>
    	<body ontouchstart>
    		<div id="">
    			<div id="list">
    
    			</div>
    		</div>
    	</body>
    
    </html>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="D:\赵啸林\art-template模板引擎使用(1)\art-template模板引擎使用\template.4.12.1.js"></script>
    
    <script src="D:\赵啸林\node_modules\node_modules\dayjs\dayjs.min.js"></script>
    <script type="text/html" id="list_tmp">
    	{ { each list arr i}}
    	<div class="date">{ { arr.date}}</div>
    	<div>{ { arr.msg}}</div>
    	<br> { { /each}}
    </script>
    <script type="text/javascript">
    	var list = [{ 
    		msg: '今天也很nice',
    		date: '2019-11-17 19:21'
    	}, { 
    		msg: '吃饭了吗？',
    		date: '2020-05-30 13:14'
    	}, { 
    		msg: '没有吃饭',
    		date: '2021-03-15 10:11'
    	}, { 
    		msg: '记得吃饭',
    		date: '2021-03-16 16:00'
    	}, { 
    		msg: '那就煮饭',
    		date: '2021-03-17 08:29'
    	}, { 
    		msg: '没米了',
    		date: '2021-03-17 08:30'
    	}, { 
    		msg: '吃空气吧',
    		date: '2021-03-17 08:35'
    	}, { 
    		msg: '没有饭了',
    		date: '2021-03-18 09:05'
    	}, { 
    		msg: '完了呀',
    		date: '2021-03-18 09:55'
    	}];
    
    	$('#list').html(template('list_tmp', { 
    		list: list
    	}));
    </script>
    
    <script type="text/javascript">
    	function showTime() { 
    		var newTime = new Date().getTime()
    		// console.log(newTime,"当前时间戳")
    		var start_time = new Date().setHours(0, 0, 0, 0)
    		// console.log(start_time,"凌晨时间")
    		var end_time = new Date().setHours(0, 0, 0, 0) - 24 * 60 * 60 * 1000
    		// console.log(end_time,"昨天凌晨时间")
    		var year = new Date().getYear()
    		// console.log(year,"当前年")
    		for(var i = 0; i < list.length; i++) { 
    			var oldTime = new Date(list[i].date).getTime()
    			// console.log(oldTime, "item时间戳")
    			var time = newTime - oldTime
    			// console.log(time,"时间差")
    			var now_time = new Date(list[i].date).setHours(0, 0, 0, 0)
    			if(time <= 5 * 60 * 1000) {  //五分钟以内的为 以下为最新消息
    				list[i].show_time = "以下为最新消息"
    			} else if(time > 5 * 60 * 1000 && now_time == start_time) {  //当天消息
    				list[i].show_time = dayjs(list[i].date).format("H:mm")
    			} else if(time > 5 * 60 * 1000 && now_time == end_time) {  //昨天消息
    				list[i].show_time = dayjs(list[i].date).format("昨天H:mm")
    			} else if(time > 5 * 60 * 1000 && now_time <= end_time && year == new Date(list[i].date).getYear()) {  //今年
    				list[i].show_time = dayjs(list[i].date).format("M月D日 AM:mm").replace("AM", "上午").replace("PM", "下午")
    			} else { 
    				list[i].show_time = dayjs(list[i].date).format("YYYY年M月D日 HH:mm")
    			}
    			console.log(i, "循环索引")
    		}
    		$('.date').each(function(index) { 
    // console.log($(this).text());item项的文本
    // console.log(index);//索引
    			$(this).text(list[index].show_time);//替换item项的文本
    		});
    		return list
    	}
    	showTime() 
    	console.log(list)
    </script>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80OTI5NTg3NA_size_16_color_FFFFFF_t_70_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80OTI5NTg3NA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221022/8932df1d677b4d94af309205dba42330.png