Chat time reminder display

<!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="https://cdn.bootcdn.net/ajax/libs/dayjs/1.4.1/dayjs.min.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>
Insert picture description here
Chat time reminder display

Guess you like
