<!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>
CSS3&JavaScript 仿微信对话框和时间格式化处理
最新推荐文章于 2024-01-26 11:04:21 发布