发送
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
}