<!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>