实例
<!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" />
<style type="text/css">
*{margin: 0;padding: 0;}
.window{
height: 500px;
width: 800px;
margin:100px auto;
background: #ECECEC;
border: 1px #ECECEC solid;
border-radius:10px ;
box-shadow: 0 0 5px 5px #CECECE;
}
.header{
width: 100%;
height: 30px;
background: coral;
border-top-right-radius:10px ;
border-top-left-radius:10px ;
text-align: center;
line-height: 30px;
}
.main{
width: 100%;
height: 370px;
}
.left{
width: 636px;height: 100%;
background: lightblue;
float: left;
border:1px solid #8E8C8C;
overflow: auto;
border-bottom:none ;
}
.right{
width: 20%;height: 100%;
background: goldenrod;
float: right;
}
.send textarea{
width: 540px;height: 99px;
border-bottom-left-radius: 10px;
resize: none;
}
#btn{
border: none;
display: block;
float: right;
width: 110px;
height: 95px;
margin-top: 3px;
margin-right:8px;
background: cornflowerblue;
color: white;
box-shadow:0 0 3px 3px #ECECEC;
border-radius:20PX ;
font-size: 30px;
}
#btn:hover{
background-color: coral;
font-size: 34px;
cursor: pointer;
}
#btn2{
border: none;
display: block;
float: right;
width: 110px;
height: 95px;
margin-top: 3px;
margin-right: 22px;
background: orange;
color: white;
box-shadow:0 0 3px 3px #ECECEC;
border-radius:20PX ;
font-size: 30px;
}
#btn2:hover{
background-color: coral;
font-size: 32px;
cursor: pointer;
}
</style>
<title>机器人聊天</title>
</head>
<body>
<div class="window">
<div class="header">
<h4>PHP中文网(培训班2期)</h4>
</div>
<div class="main">
<div class="left" >
<ul>
</ul>
</div>
<div class="right"> </div>
</div>
<div class="send">
<textarea name="area" rows="6" cols="70"></textarea>
<input type="button" id="btn" value="SEND" />
<input type="button" id="btn2" value="CLOSE" />
</div>
</div>
</body>
</html>
<script type="text/javascript">
//获取.left窗口
var left = document.getElementsByClassName('left')[0]
//获取ul 节点
var ul =left.getElementsByTagName('ul')[0]
//获取文本域
var textarea = document.getElementsByName('area')[0]
//获取按钮
var btn = document.getElementById("btn")
//设定累加次数初始化
var sum = 0;
//添加按钮点击事件
btn.onclick = function(){
//判断文本域是否为空
if(textarea.value.length==0){
alert('发送内容为空，请重新输入！！！')
textarea.focus()//获取焦点
return false
}
// 创建样式字符串
var pic = "<img src='http://img5q.duitang.com/uploads/item/201503/02/20150302211038_yyiVz.jpeg' style='width: 40px;border-radius:50% ;' alt='头像'/>"
var font = "<span style='color:coral;font-family: '微软雅黑';font-size:16px;'>"
var li = document.createElement('li') //创建节点li
li.innerHTML = pic + font+ textarea.value +'</span>' //创建文本节点
ul.appendChild(li) //appendChild : 附属 追加 追加到ul节点
//自动回复
//清空用户输入内容
textarea.value = ''
//设定列表累加次数
sum += 1
//创建一个定时器
setTimeout(function(){
//创建一个数组
var replayarr = ['你好，在的。','有什么可以帮助你的呢','这里是php中文网','你是哪位','故人具鸡黍','邀我至田家','绿树村边合','青山郭外斜','开轩面场圃','把酒话桑麻','待到重阳日','还来就菊花']
//取数组随机数 函数体
var index = Math.floor((Math.random()*replayarr.length))
// 创建样式字符串
var pic = "<img src='http://img4.duitang.com/uploads/item/201608/22/20160822132311_yLE2R.jpeg' style='width: 40px;border-radius:50% ;' alt='头像'/>"
var font = "<span style='color:black;font-family: '微软雅黑';font-size:16px;'>"
var li = document.createElement('li') //创建节点li
li.style.display = 'block'
li.style.float = 'right'
li.innerHTML = font+ replayarr[index] +'</span>' + pic//创建文本节点
ul.appendChild(li) //appendChild : 附属 追加 追加到ul节点
sum += 1
},2000)
// 判断li列表累加次数
if(sum>=16){
ul.innerHTML= ''
sum = 0
}
}
</script>运行实例 »
点击 "运行实例" 按钮查看在线实例
