实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>客服聊天</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<style>
*{margin: 0 auto;padding: 0;border:0;}
.div{width: 400px;height: 500px;border: 1px solid #ccc;margin:0 auto;margin-top: 100px;}
.main{width: 100%;height: 400px;background: #f2f2f2;}
.fs{width: 100%;height: 100px;overflow: hidden;}
input,textarea{float: left}
input{width: 103px;height: 100px;background: #f40}
input:hover{background: #f50;color: #fff;cursor: pointer;}
ul{list-style: none;}
img{border-radius: 50%;}
</style>
<body>
<div class="div">
<div class="main">
<ul class="nr"></ul>
</div>
<div class="fs">
<textarea name="" id="text" cols="40" rows="10"></textarea>
<input class="up" type="button" value="发送">
</div>
</div>
</body>
<script>
var page=0;
$(".up").click(function(){
page++;
var a=$("#text").val();//获取输入的内容
var li="<img width='30' src='https://img.php.cn/upload/avatar/000/000/001/1f2b30abb3b33a4b816c6c430143ea28.jpg'>"//头像
var back="<img width='30' src='https://img.php.cn/upload/avatar/000/000/001/0cf3a808f8440a422206ce1975188334.jpg'>";
var backText=['你说撒','爱你哟','默默地','可以'];
var num=Math.floor(Math.random()*backText.length);
if(a==""){//判断是否为空
alert("请输入发送内容");
return;
}
$(".nr").append("<li>"+li+a+"</li>");
setTimeout(function(){$(".nr").append("<li>"+back+backText[num]+"</li>");},2000)
$("#text").val('');
if(page>6){
$(".nr").html('');
}
})
</script>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
