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