在线客服对话框
<!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;}
</style>
</head>
<body>
<div class="box1">
<h2>客服中心</h2>
<div>
<ul></ul>
</div>
<div>
<textarea cols="40" rows="3" placeholder="输入聊天内容"></textarea>
</div>
</div>
<script>
var input=document.getElementsByTagName('textarea')[0];
var ul=document.querySelector('ul');
input.onkeydown=function(){
if(event.keyCode==13){
var li=document.createElement('li');//****
li.innerHTML=input.value;
ul.appendChild(li);
input.value="";
}
}
</script>
</body>
</html>