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

àì夳堔傛蜴生んèń 2022-04-15 04:42 227阅读 0赞

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

<!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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoeTU1NWNoeQ_size_16_color_FFFFFF_t_70]: /images/20220415/134d9f8a96394583a74e6387fea13bbd.png