实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
background-color: #39c3ff;
width: 500px;
height: 700px;
margin: auto 25%;
}
ul>li {
padding: 5px;
list-style-type: none;
height: 50px;
}
div ul {
width: 400px;
margin-left: 6%;
background-color: #ffffff;}
</style>
</head>
<body>
<div>
<h2 style="">在线客服</h2>
<hr>
<ul> </ul>
<tbale style="padding-left: 24%">
<tr>
<td align="right"> <input type="text" style="height: 31px;" value="" ></td>
<td align="right"> <button style="width: 79px;height: 31px;">发送</button></tr></td>
</tbale >
</div>
<script>
var list= document.getElementsByTagName('ul')[0];
var botton =document.getElementsByTagName('button')[0];
var text = document.getElementsByTagName('input')[0];
var sum =0;
botton.onclick = function () {
if(text.value.length === 0) {
var li = document.createElement('li'); //创建li标签
li.innerText = '请输入内容'; //li内容
list.appendChild(li);// 插入ul
sum += 1;
}else if (text.value.length != 0 ) {
var usercomment = text.value;
var a1 = document.createElement('li');
var a1pic = '<img src="https://img.php.cn/upload/image/638/838/196/1558097467436948.jpg" width="30" style="border-radius:50%;">';
a1.innerHTML ='<p style="float: left">'+ a1pic+ usercomment +'</p>';
list.appendChild(a1);// 插入ul
sum +=1;
text.value = '';
setTimeout(function(){
var info = ['你好烦人呀,本姑娘好累,不知道怜香惜玉吗?',
'除了退货,退款,维修,什么问题都可以问',
'啥事呀,我的帅哥哥'
];
var temp = info[Math.floor(Math.random()*3)];
var kefu = document.createElement('li');
var kefuPic = '<img src="https://img.php.cn/upload/image/776/480/518/1558097445295742.jpg" width="30" style="border-radius:50%;">';
kefu.innerHTML = '<p style="float: right">'+ '<span style="color: red">'+ temp + '</span>'+ kefuPic + '</p>';
list.appendChild(kefu);
sum += 1;
},2000);
}
if (sum > 8) {
list.innerHTML = ''; //清空内容
sum = 0; // 清空计数器
}
};
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
