使用html( )獲取和設(shè)置頁面內(nèi)容

使用val( )獲取聊天內(nèi)容

使用addClass( )為指定元素追加樣式

使用數(shù)組保存聊天人員頭像和昵稱

使用隨機(jī)函數(shù)獲取聊天人員的頭像和昵稱

在輸入框中輸入內(nèi)容，單擊“發(fā)送”按鈕，顯示聊天內(nèi)容，使用addClass( )為聊天內(nèi)容添加背景顏色、邊框為圓角；聊天內(nèi)容發(fā)送完畢后，清空輸入框

聊天內(nèi)容較多，聊天內(nèi)容在垂直方向顯示滾動條

輸入框中沒有輸入內(nèi)容，單擊“發(fā)送”按鈕，不作任何操作

使用數(shù)組保存聊天者的頭像和昵稱

使用val()獲取輸入框中的內(nèi)容，使用length屬性判斷是否輸入內(nèi)容

獲取當(dāng)前聊天內(nèi)容

使用html( )把當(dāng)前聊天內(nèi)容顯示在聊天區(qū)域

使用addClass( ) 為當(dāng)前聊天內(nèi)容添加背景樣式

$(document).ready(function(){

var $imgs=new Array("images/head01.jpg","images/head02.jpg","images/head03.jpg");

var $ni=new Array("時尚伊人","六月奇跡","松松");

$("#send").click(function(){

var $sui = parseInt(Math.random() * 3);

var $nei=$("textarea").val();

if($nei.length==""){

alert("你沒寫東西啊");

}else{

var $currentstr=$(".chatBody").append("

"+$ni[$sui]+"

"+$nei+"

");

$(".chatBody p").addClass("a");

$("textarea").val("");

}

});

});

關(guān)閉(C)發(fā)送(S)

*{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;}

.a{

background-color: darkgray; border-radius: 5px;

}

總結(jié)

以上是生活随笔為你收集整理的qq html制作,jquery学习练习：制作QQ简易聊天框的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。