智能在线***模拟
实例
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" charset="utf-8"/>
<style>
li{
list-style-type:none;
}
.box{
border: 1px solid #efefef;
background-color: #FF8080;
width: 400px;
min-height: 700px;
border-radius: 3%;
box-shadow: 2px 2px 2px black;
margin: 0 auto;
}
ul{
min-height: 550px;
border: 1px solid #efefef;
background: lightgoldenrodyellow;
margin: 10px 20px;
}
button{
background:lightgoldenrodyellow;
}
button:hover{
background:lightgreen;
}
input button{
margin-bottom: 50px;
}
.box1{
width:250px;
margin:0 auto;
}
h2{
text-align: center;
}
</style>
<title>QQ聊天记录</title>
</head>
<body>
<div class="box">
<h2>智能在线客 服</h2>
<ul class="ul"></ul>
<div class="box1">
<input type="text" name="" />
<button type="button">发送</button>
</div>
</div>
<script>
let btn = document.getElementsByTagName('button')[0];
let ul = document.getElementsByTagName('ul')[0];
let input = document.getElementsByTagName('input')[0];
btn.onclick = function (){
if(input.value.length==0){ return false;}
let li= document.createElement('li');//创建li元素
li.innerHTML = input.value;//将用户输入的内容赋给li
ul.append(li);//添加到父元素ul上
//机器人回答
let ai = [
'你管我！','你还有什么问题吗？','暂时不提供这项服务。','这个问题我回答不了你，请找专家',
'我不明白您在说什么','你好我们下班了，有问题请留言，谢谢！','你好，我系统繁忙，稍后回复您'
];
let num = Math.floor(Math.random()*7);
let liAi= document.createElement('li');//创建li元素
setTimeout(function (){ liAi.innerHTML = '<h4 style="color:red;">'+'客 服：'+ai[num]+'</h4>';},2000)//将用户输入的内容赋给li
ul.append(liAi);//添加到父元素ul上
input.value='';//清空输入框
input.focus();//输入框获得焦点
//判断li数量达到6个之后移除第一个
let linum = document.getElementsByTagName('li');
if(linum.length>12){
ul.innerHTML='';
}
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例