CSS3&JavaScript 仿微信对话框和时间格式化处理

最新推荐文章于 2024-05-17 16:45:39 发布

福州司马懿

最新推荐文章于 2024-05-17 16:45:39 发布

阅读量3.3k

点赞数 2

分类专栏： # CSS3 自定义控件 # JavaScript 自定义控件

转载请注明出处——https://blog.csdn.net/chy555chy

本文链接：https://blog.csdn.net/chy555chy/article/details/84325958

版权

JavaScript 自定义控件同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

CSS3 自定义控件

14 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html>
<meta charset="utf8">
<head>
<style>
* {
	margin: 0;
	padding: 0;
}
body {
	background-color: #EBEBEB;
}
.chat {
	padding-left: 1rem;
	padding-right: 1rem;
	padding-bottom: 1rem;
}
/* 时间 */
.chat>dt {
	padding-top: .3rem;
	padding-bottom: .3rem;
	padding-left: .6rem;
	padding-right: .6rem;
	border-radius: .2rem;
	color: white;
	background-color: #D4D4D4;
	display: inline-block;
	margin-left: 50%;
	margin-top: 2rem;
	margin-bottom: 1rem;
	transform: translateX(-50%);
}
.chat-send, .chat-recv {
	display: flex;
}
.chat-send {
	flex-direction: row-reverse;
}
.chat-recv {
	flex-direction: row;
}
/* 头像 */
.chat-send>div:nth-child(1), .chat-recv>div:nth-child(1) {
	width: 4rem;
	height: 4rem;
	border-radius: .2rem;
	display: inline-block;
	background-color: white;
	flex-shrink: 0;
	border: 1px solid lightgray;
	background-size: 100%;
}
/* 消息 */
.chat-send>div:nth-child(2), .chat-recv>div:nth-child(2) {
	display: inline-block;
	font-size: x-large;
	padding: 1rem;
	border-radius: .5rem;
	position: relative;
}
.chat-send>div:nth-child(2) {
	background-color: #A0E75A;
	border: .1rem solid #74BE50;
	margin-right: 1rem;
}
.chat-recv>div:nth-child(2) {
	background-color: white;
	border: .1rem solid lightgray;
	margin-left: 1rem;
}
/* 消息边框的三角形箭头(利用内容为空的元素的其中一个边框来实现) */
.chat-send>div:nth-child(2)::before, .chat-recv>div:nth-child(2)::before {
	content: '';
	width: 0;
	height: 0;
	border: .5rem solid transparent;
	position: absolute;
}
.chat-send>div:nth-child(2)::before {
	border-left-color: #A0E75A;
	right: 0;
	transform: translateX(100%);
}
.chat-recv>div:nth-child(2)::before {
	border-right-color: white;
	left: 0;
	transform: translateX(-100%);
}
</style>
<style id="profileStyle">
</style>
<script>
/*
对Date的扩展，将 Date 转化为指定格式的String
月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q)可以用1-2个占位符
年(y)可以用1-4个占位符，毫秒(S)只能用1个占位符号(是1-3为的数字)
例子：
(new Date()).Format("yyyy-MM-dd hh:mm:ss.S")	==> 2006-07-02 08:09:04.423
(new Date()).Format("yyyy-M-d h:m:s.S")			==> 2006-7-2 8:9:4.18
*/
Date.prototype.format = function(fmt) {
	const o = {
		"y+": this.getFullYear(),
		"M+": this.getMonth()+1,
		"d+": this.getDate(),
		"H+": this.getHours(),
		"m+": this.getMinutes(),
		"s+": this.getSeconds(),
		"S+": this.getMilliseconds(),
		"q+": Math.floor(this.getMonth()/3) + 1,
		"h+": (()=>{
			const hour=this.getHours()%12;
			return hour==0?12:hour;
		})(),
		"E+": (()=>{
			const week = {"0":"Sunday","1":"Monday","2":"Tuesday","3":"Wednesday","4":"Thursday","5":"Friday","6":"Saturday"}; 
			return week[this.getDay()+""];
		})(),
		/*
		"e+": (()=>{
			const week = {"0":"Sun","1":"Mon","2":"Tue","3":"Wed","4":"Thu","5":"Fri","6":"Sat"}; 
			return week[this.getDay()+""];
		})(),
		*/
		"x1": (()=>{
			const week = {"0":"周日","1":"周一","2":"周二","3":"周三","4":"周四","5":"周五","6":"周六"}; 
			return week[this.getDay()+""];
		})(),
		"x2": (()=>{
			const hour = ["凌晨","早上","下午","晚上"];
			const h=this.getHours();
			if(h==12) return "中午";
			return hour[parseInt(h/6)];
		})(),
	}
	for(var k in o) {
		if(new RegExp("("+k+")", "g").test(fmt)) {
			const len = RegExp.$1.length;
			fmt = fmt.replace(RegExp.$1, len==1?o[k]:("00"+o[k]).substr(-len));
		}
	}
	return fmt;
}
Date.prototype.toWeiXinString = function() {
	let str;
	const now = new Date();
	const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
	const yesterday = new Date(now.getFullYear(), now.getMonth(), now.getDate()-1);
	const beforeYesterday = new Date(now.getFullYear(), now.getMonth(), now.getDate()-2);
	const monday = new Date(today);
	monday.setDate(today.getDate()-(today.getDay()?today.getDay()-1:6));
	//注意：date初始化默认是按本地时间初始的，但打印默认却是按GMT时间打印的，也就是说打印出的不是本地现在的时间
	//LocaleString的打印也有点问题，"0点"会被打印为"上午12点"
	if(this.getTime() > today.getTime()) {
		str = "";
	} else if(this.getTime() > yesterday.getTime()) {
		str = "昨天";
	} else if(this.getTime() > beforeYesterday.getTime()) {
		str = "前天";
	} else if(this.getTime() > monday.getTime()) {
		const week = {"0":"周日","1":"周一","2":"周二","3":"周三","4":"周四","5":"周五","6":"周六"}; 
		str = week[this.getDay()+""];
	} else {
		const hour = ["凌晨","早上","下午","晚上"];
		const h=this.getHours();
		if(h==12) str = "中午";
		else str = hour[parseInt(h/6)];
		str = this.format("MM月dd ") + str;
	}
	str += this.format("HH:ss");
	return str;
}
console.log(new Date().format("yyyy-MM-dd HH:mm:ss.SSS (q)(E)(x1)(x2)(x3)"));

function initChatRecord() {
	const profileSend = "https://ss1.baidu.com/70cFfyinKgQFm2e88IuM_a/forum/pic/item/2f738bd4b31c870153a4a7b7267f9e2f0708ff55.jpg";
	const profileRecv = "https://ss1.baidu.com/70cFfyinKgQFm2e88IuM_a/forum/pic/item/d143ad4bd11373f07fafb7d2a10f4bfbfaed04ef.jpg";
	const chatRecord = [
	{
		time: 1542508403000,
		dir: 'send',
		msg: '动态聊天记录'
	},{
		time: 1542608403000,
		dir: 'recv',
		msg: '打开支付宝首页搜索"xxxxxxx"立即领红包'
	},{
		time: 1542708403000,
		dir: 'send',
		msg: `《鲜肉老师》
		爱笑的女孩运气不会太差，爱说笑话的男人撩妹也不会太差，生命不止，撩妹不息，做个有趣的人，要把撩妹作为人生永恒的事业去做，你才有可能在妹子心中占据第二的位置
		第二的位置，那第一是谁?
		网购购物车，不是人民币玩家，你就不要想篡位的事了
		谈钱太现实了
		你看你说这话你一看就是穷逼，你知道吗，人穷可以但是不能逼逼，努力提高品味，乐观对待生活，穷也要穷的有乐趣`
	}];

	const profileStyle = document.getElementById("profileStyle");
	profileStyle.innerText = ".chat-send>div:nth-child(1){background-image:url(" + profileSend + ")}.chat-recv>div:nth-child(1){background-image:url(" + profileRecv + ")}";
	
	const chat = document.getElementsByTagName("dl")[0];
	chatRecord.forEach((elem)=>{
		const time = document.createElement("dt");
		time.textContent = new Date(elem.time).toWeiXinString();
		chat.appendChild(time);
		const msg = document.createElement("dd");
		msg.setAttribute("class", "chat-" + elem.dir);
		const profile = document.createElement("div");
		const content = document.createElement("div");
		content.innerText = elem.msg;
		msg.appendChild(profile);
		msg.appendChild(content);
		chat.appendChild(msg);
	});
}
window.onload = ()=> { initChatRecord(); }
</script>
</head>
<body>
<dl class="chat">
	<dt>11月16日 晚上19:19</dt>
	<dd class="chat-send">
		<div></div>
		<div>静态聊天内容</div>
	</dd>
	<dt>昨天 18: 45</dt>
	<dd class="chat-recv">
		<div></div>
		<div>打开支付宝首页搜索"xxxxxxx"立即领红包</div>
	</dd>
	<dt>06:26</dt>
	<dd class="chat-send">
		<div></div>
		<div>节能灯驱动电路详解，掌握这些知识，开关电源电路分析也不难了</div>
	</dd>
</dl>
</body>
</html>

福州司马懿

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
CSS3&JavaScript 仿微信对话框和时间格式化处理

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;meta charset="utf8"&gt;&lt;head&gt;&lt;style&gt;* { margin: 0; padding: 0;}body { background-color: #EBEBEB;}.chat { padding-left: 1rem; padding-rig...
复制链接

扫一扫