智能在线客服自动回复
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>聊天室</title>
<style>
.box1{width:320px;height:500px;box-shadow: 5px 5px 5px 0 grey;border-radius:5px;background-color: slateblue;}
/* n从1开始 */
div:nth-child(2){width:300px;height:300px;border-radius:3px;background-color: #f5f5f5;margin:10px;}
li{list-style: none;color:#333;text-align: left;}
h2{color:#fff;padding:30px 10px 0px}
textarea{border:none;border-radius:3px;background-color: #fff;margin:10px;}
button{border:none;width:80px;height:28px;margin-right:10px;float:right;border-radius:3px;}
</style>
</head>
<body>
<div class="box1">
<h2>客服中心</h2>
<div>
<ul></ul>
</div>
<div>
<textarea cols="40" rows="3" placeholder="输入聊天内容"></textarea>
</div>
<button onclick="ff()">发送</button>
</div>
<script>
var input=document.getElementsByTagName('textarea')[0];
var ul=document.querySelector('ul');
function ff(){
if (input.value.trim()=="") { //tim()
alert("内容不可以为空");
return false;
}
var li=document.createElement('li');//****
var userpic='<img src="imgs/0.gif" width="20">';// width="30"
li.innerHTML=userpic + " " + input.value;
ul.appendChild(li);
input.value="";
input.focus();
setTimeout(reply(),1000);
var sum;
sum+=1;
if (sum==5) ul.innerHTML="";//ul
}
function reply(){
let anwsers=['我是小米','好好学习天天向上','我最喜欢毛毛','天气太冷了','你快回来']
let rpl=anwsers[Math.floor(Math.random()*4)] //少写了字母w
let mypic='<img src="imgs/1.gif" width="30">'
var li=document.createElement('li');
li.innerHTML=mypic+" "+rpl;
ul.appendChild(li);
}
</script>
</body>
</html>