<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>制作qq简易聊天框</title>
<script type="text/javascript" src="js/jQuery1.11.1.js"></script>
<script type="text/javascript" src="js/jquery-migrate-1.2.0.js"></script>
<link rel="stylesheet" href="css/chat.css">
<style type="text/css">
</style>
<script type="text/javascript">
$(function(){
//保存聊天者的头像和昵称
//var headImg = new Array("images/head01.jpg","images/head02.jpg","images/head03.jpg");
var uname = new Array("时尚达人","六月岛","胜过这首歌");
//鼠标单击事件
$("#send").click(function(){
qqgo();
});
//键盘点击事件
$(document).keydown(function(event){
if(event.keyCode=="13"){//按下回车键
qqgo();
}
});
function qqgo(){
//获取文本值
var txt_value = $(".chatText").val();
if (txt_value!="") {
//设置随机数
//随机数：0+1 = 1，1+1 = 2，2+1 =3; 所以是1，2，3
var iNum = Math.floor(Math.random()*uname.length)+1;
//设置聊天内容
var headStar = "<div><img src =images/head0"+iNum+".jpg></div>";//头像
//昵称数组的下标是：1-1 = 0，2-1 = 1，3-1 = 2；所以最后对应上数组的下标：0，1，2
var userName ="<p>"+uname[iNum-1]+"</P>";//昵称
var chatAtr = "<div>"+$(".chatText").val()+"</div>";//当前输入的内容
var currentStr ="<section>"+headStar+userName+chatAtr+"</section>";
//获得当前聊天的内容
var str = $(".chatText").html();
//获取到的聊天的内容加入到chatBody的div上去
$(".chatBody").html(str+currentStr);
$(".chatText").val('');//清空输入框
}else{
alert("请输入值");
}
}
});
</script>
</head>
<body>
<section id="chat">
<div class="chatBody"></div>
<div><img src="images/icon.jpg"></div>
<textarea class="chatText"></textarea>
<div class="btn"><span>关闭(C)</span><span id="send">发送(S)</span></div>
</section>
</body>
</html>
