生活随笔
收集整理的這篇文章主要介紹了
制作qq简易聊天框
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!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>
總結
以上是生活随笔為你收集整理的制作qq简易聊天框的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
