发送
body { background:rgb(46,47,61); } ul { list-style:none; padding:0; margin:0; } .icon { width:1em; height:1em; vertical-align:-0.15em; fill:currentColor; overflow:hidden; } .wrap { width:900px; height:550px; background:#fff; margin:100px auto; margin-top:100px; margin-right:auto; margin-bottom:100px; margin-left:auto; display:flex; } /* 左边 */ .left { height:inherit; width:30%; border-right:1px solid #e1e1e1; } .UserHead { padding:10px; background:rgb(255,76,71); } .UserTop { display:flex; } .UserTop img { width:54px; margin-right:14px; } .userT { font-size:38px; margin-right:10px; } .iconName { font-size:16px; } .souSuo { display:flex; background:#fff; border-radius:2px; margin-top:10px; height:30px; } .souSuo .sou { font-size:24px; } .souSuo input { width:100%; /* height:100% */ border:none; box-shadow:0px 0px 0px #fff; outline:none; } .left ul li { padding:10px; font-size:14px; } .left ul li span { font-size:12px; padding:2px 6px; background:yellow; float:right; } .xuanZhong { background-color:#0086B3; } .left ul .icon { font-size:30px; vertical-align:middle; margin-right:10px; } /* 右边 */ .right { width:70%; /* background:red; */ } .Rhead { height:12%; background:beige; line-height:60px; } .Rhead .kefu { font-size:44px; vertical-align:middle; margin:0 10px; } .content { height:88%; border-bottom:1px solid #ccc; } .text { padding:0 20px; position:relative; } .TextTop { height:50px; display:flex; align-items:center; font-size:20px; } .TextTop .icon { font-size:20px; margin-right:10px; } .dialogue { width:100%; height:64%; padding:14px; box-sizing:border-box; overflow-x:hidden; overflow-y:scroll; } .textarea { min-height:88px; outline:none; overflow-y:auto; font-size:0.9em;border: 1px solid #e8e8e8; } .textAlign { text-align:center; } .right2 { display:flex; flex-direction:row-reverse; } .huanHang { width:200px; word-wrap:break-word; } .right2 > div { padding:10px; word-wrap:break-word; white-space:normal; background:rgb(208,233,255); } .left2 { display:flex; } .left2 > div { padding:10px; word-wrap:break-word; background:rgb(208,233,255); } .HeadPortrait { width:2.2rem; height:2.2rem; margin-left:14px; } .HeadPortrait2 { width:2.2rem; height:2.2rem; margin-right:14px; } .Enter { width:42px; height:19px; border:1px solid #999; font-size:#fff; text-align:center; position:absolute; right:20px; bottom:-27px; }
更新时间:2021-12-07 01:18:35
js 写的聊天自动回复 , 发送消息会判断上一条消息的 发送时间,如果达到设定值则让时间显示出来
if (!timey) { // 先定义一个开关 , 第一次进入第一层判断 console.log("1") timey = timestamp // 将最新的时间戳放到开关里 mitebox.innerhtml = html // 把最新的时间渲染到页面 } else if (timestamp - timey > 20000) { // 如果这一条件成立 说明消息上一条消息时间间隔已经大于预定的值了(可以间隔1分~xx分自己定) 需要把最新的时间渲染到页面 然后把最新的消息的时间变更为最新的时间 console.log(timestamp - timey) timey = timestamp mitebox.innerhtml = html } else { // 如果上面的条件不成立 就说明消息在接连发送,不需要渲染最新的时间到页面 ,将最新的时间赋值到上一次发送消息的时间 console.log("3") timey = timestamp }