Html
    Css
    Js

    
                        
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;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

js自动聊天机器人代码

更新时间: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
}


1