JavaScript實現(xiàn)QQ聊天室功能

更新時間：2022年07月29日 10:34:47 作者：今天我學習

這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)QQ聊天室功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了JavaScript實現(xiàn)QQ聊天室的具體代碼，供大家參考，具體內容如下

1. 任務要求

1）掌握基本過濾選擇器；

2）掌握jQuery對象的click()方法；

3）掌握jQuery對象的css()方法；

4）掌握jQuery對象的addClass()方法；

5）如何獲取指定元素的值？

6）如何設置元素的顯示和隱藏？

7）如何設置元素的html代碼？

2. 需求說明

制作顯示如下圖所示的QQ聊天頁面。隨機用戶在文本框中輸入文本后點擊“發(fā)送”按鈕，文本中的消息將顯示在“聊天記錄區(qū)域”中。聊天記錄區(qū)域列表顯示發(fā)消息人的頭像、姓名和消息內容。

3. 實現(xiàn)思路

1）首先定義兩個數(shù)組，用來存儲圖片headImg和QQ昵稱uName。

2）If條件判斷文本框中是否有內容，如果沒有內容則用alert提示不能發(fā)送空白信息。

3）Math.random()獲取隨機數(shù)，使圖片headImg和QQ昵稱uName隨機出現(xiàn)。

4）將每一次輸入進行累加，不然下一次輸入會覆蓋上一次輸入的信息，導致實現(xiàn)不了多條信息發(fā)送效果。

5）使用addClass()方法設置發(fā)送后的文本屬性。

6）并在發(fā)送后使用val()方法清空文本框。

4. 實現(xiàn)代碼

// JavaScript Document
$(document).ready(function(e) {
?? ?var headImg=new Array("qq1.jpg","qq2.jpg","qq3.jpg","qq4.jpg","qq5.jpg");
? ? var uName=new Array("柒","米婭","松松","小虎","小鬼");
? ? $("#send").click(function(e) {
?? ??? ?if ($(".chatText").val().length>0){//判斷輸入框中是否有內容
?? ??? ??? ?var id=Math.floor(Math.random()*5);//隨機獲取頭像和昵稱
?? ??? ??? ?//設置頭像、昵稱、獲取并設置輸入的內容
?? ??? ??? ?var text="<section><div><img src=img/"+headImg[id]+"></div><p>"+uName[id]+"</p><div>"+$(".chatText").val()+"</div></section>";
?? ??? ??? ?var result=$(".chatBody").html()+"</br>"+text;
?? ??? ??? ?$(".chatBody").html(result);
?? ??? ??? ?$(".chatBody section div:last").addClass("chatContent");
?? ??? ??? ?$(".chatText").val("");//清除文本框中的內容
?? ??? ?}
?? ??? ?else{
?? ??? ??? ?alert("不能發(fā)送空白消息！");
?? ??? ?}
? ? });
});

5. 運行結果

6. 其他代碼

.html

<!DOCTYPE html>
<html>
<head lang="en">
? ? <meta charset="UTF-8">
? ? <title>QQ簡易聊天框</title>
? ? <link rel="stylesheet" href="css/chat.css" >
</head>
<body>
<section id="chat">
? ? <div class="chatBody"></div>
? ? <div><img src="img/icon.jpg"></div>
? ? <textarea class="chatText"></textarea>
? ? <div class="btn"><span>關閉(C)</span><span id="send">發(fā)送(S)</span></div>
</section>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/chat.js"></script>
</body>
</html>

.css

*{margin: 0; padding: 0; line-height: 22px; font-family: "Arial", "微軟雅黑";}
#chat{
?? ?margin: 3px auto 0 auto;?
?? ?width:436px;?
?? ?border: 1px #999999 solid;
?? ?background-image: url(../img/6.jpg);
}
.chatBody{
?? ?width: 100%;?
?? ?height: 220px;?
?? ?overflow:auto;
?? ?color: #069DD5;
}
.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;
}
.chatBody div:first-of-type{
?? ?float: left;?
?? ?width: 38px;
}
.chatBody p{
?? ?float: left;?
?? ?font-size: 12px;?
?? ?width:370px;?
?? ?color: #0000ff;
}
.chatBody div:last-of-type{
? ? float: left;?
?? ?width: 370px;?
?? ?font-size: 12px;
}
.chatBody section{
?? ?clear: both;
}
.chatContent{?
?? ?background:#efefef;
?? ?border-radius: 5px;?
?? ?padding: 3px;
}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: