<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>QQ简易聊天框</title>
<style>
*{margin: 0; padding: 0; line-height: 22px; font-family: "Arial", "微软雅黑";}
#chat{margin: 3px auto 0 auto; width:436px; border: 1px #999999 solid;}
.chatBody{width: 100%; height: 220px; overflow:auto;}
.chatText{border: none; width: 100%; height: 50px;}
.btn{text-align: right;}
.btn span{display: inline-block; padding: 0 10px; height: 25px;
overflow: hidden; color: #ffffff; border-radius: 5px; background-color: #069dd5; font-size: 12px; margin-right: 3px; cursor:pointer;}
.chatBody div:first-of-type{float: left; width: 38px;}
.chatBody p{float: left; font-size: 12px; width:370px; color: #0000ff;}
.chatBody div:last-of-type{
float: left; width: 370px; font-size: 12px;}
.chatBody section{clear: both;}
.chatContent{ background:#efefef;border-radius: 5px; padding: 3px;}
</style>
</head>
<body>
<section id="chat">
<div class="chatBody"></div>
<div><img src="img/icon.jpg"></div>
<textarea class="chatText"></textarea>
<div class="btn"><span>关闭(C)</span><span id="send">发送(S)</span></div>
</section>
<script src="js/jquery-1.12.4.js"></script>
<script >
$(document).ready(function(){
var headImg=new Array("head01.jpg","head02.jpg","head03.jpg");
var uName=new Array("时尚伊人","六月奇迹","松松");
$("#send").click(function(){
if($(".chatText").val().length>0){ //判断当前输入框中是否有内容
var str=$(".chatBody").html(); //获取当前聊天内容
var iNum=Math.floor(Math.random()*3); //随机获取头像和昵称
var headStr="<div><img src=img/"+headImg[iNum]+"></div>"; //设置头像
var userName="<p>"+uName[iNum]+"</p>"; //设置昵称
var chatStr="<div>"+$(".chatText").val()+"</div>"; //获取并设置当前输入的内容
var currentStr="<section>"+headStr+userName+chatStr+"</section>"; //当前聊天的头像、昵称和内容
$(".chatBody").html(str+currentStr);
$(".chatBody section div:last").addClass("chatContent");
$(".chatText").val("");//清除文本框中的内容
}
});
})
</script>
</body>
</html>
作业14-QQ简易聊天框
最新推荐文章于 2022-09-16 17:38:39 发布