JavaScript實現(xiàn)簡易QQ聊天界面

更新時間：2022年07月29日 10:44:44 作者：YaJeanZhang_

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

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

題目：

制作一個簡易聊天界面，當(dāng)用戶在界面下方的文本框中輸入信息后，點擊發(fā)送按鈕，文本框中的信息發(fā)送到界面中部的信息顯示區(qū)域，同時信息輸入文本框中的信息被清空，等待下次信息錄入。信息從上往下一條條顯示。

操作界面如下圖所示：

題目分析：

1.用戶輸入信息，需要文本框text；
2.確定輸入的信息后，點擊發(fā)送按鈕，即button按鈕；
3.文本框的信息將顯示在信息顯示區(qū)域textarea，或者div，本文將使用textarea；
4.單擊發(fā)送按鈕之后，文本框中上條內(nèi)容應(yīng)被清空；

代碼分析：

<body>
?? ?<form id="myform" method="post">
?? ??? ?<textarea id="mytext" rows="15" cols="40"></textarea><br>
?? ??? ?<div id="mydiv">
?? ??? ?<span id="name">丫丫：</span>
?? ??? ?<input type="text" name="message" id="message">
?? ??? ?<input type="button" value="發(fā)送" id="submit">
?? ??? ?</div>
?? ?</form>
</body>

此部分代碼功能為：在HTML頁面中呈現(xiàn)出基本的操作界面；
設(shè)置textarea大小為 rows=“15” cols=“40” ；
此模塊中的div標簽作用在于為輸入本文框，按鈕設(shè)置背景色；

<style type="text/css">
?? ??? ?#mydiv
?? ??? ?{
?? ??? ??? ?background-color: pink;
?? ??? ??? ?width:300px;
?? ??? ?}
?? ??? ?#mytext
?? ??? ?{
?? ??? ??? ?border:2px pink dotted;
?? ??? ??? ?text-align: left;
?? ??? ?}
?? ?</style>

為界面設(shè)置 css 樣式；

1.#mydiv ：為id號為“ mydiv ” 的元素設(shè)置樣式；
2.#mytext ：為id號為“ mytext ” 的元素設(shè)置樣式;

border:2px pink dotted;
text-align: left;

border：設(shè)置 2像素大小粉色點狀邊框；
內(nèi)容顯示為居左；

<script type="text/javascript">
?? ??? ?window.onload = function()
?? ??? ?{
?? ??? ??? ?var aname = document.getElementById("name");
?? ??? ??? ?var amessage = document.getElementById("message");
?? ??? ??? ?var amytext = document.getElementById("mytext");
?? ??? ??? ?var asubmit = document.getElementById("submit");
?? ??? ??? ?asubmit.onclick = function()
?? ??? ??? ?{
?? ??? ??? ??? ?amytext.value += aname.innerText + amessage.value +"\n\n" ;
?? ??? ??? ??? ?amessage.value = "";
?? ??? ??? ?}
?? ??? ?}
?? ?</script>

window.onload = function()，當(dāng)頁面載入之后開始編譯；
因為，文本域顯示的內(nèi)容是追加一條一條的，故用 += 賦值；
aname.innerText :
name的獲取通過.innerHTML獲取，也可用.innerText，區(qū)別在于.innerHTML中從對象的起始位置到終止位置的全部內(nèi)容,包括Html標簽；而.innerText 去除了Html標簽（可以理解為樣式）

var asubmit = document.getElementById("submit");
asubmit.onclick = function(){ }

首先獲取發(fā)送按鈕動作，為此動作添加事件，具體事件內(nèi)容寫在大括號{ }中；

amessage.value = "";

此條語句的作用在于，將每次文本框中的內(nèi)容發(fā)送之后，自動清空上條內(nèi)容，為接收下調(diào)內(nèi)容做準備；若沒有此條語句，則會出現(xiàn)以下情況：

圖中用紅色筆圈出部分！

源代碼

<!DOCTYPE html>
<html>
<head>
?? ?<title>QQChat</title>
?? ?<meta charset="utf-8">
?? ?<style type="text/css">
?? ??? ?#mydiv
?? ??? ?{
?? ??? ??? ?background-color: pink;
?? ??? ??? ?width:300px;
?? ??? ?}
?? ??? ?#mytext
?? ??? ?{
?? ??? ??? ?border:2px pink dotted;
?? ??? ??? ?text-align: left;
?? ??? ?}
?? ?</style>
?? ?<script type="text/javascript">
?? ??? ?window.onload = function()
?? ??? ?{
?? ??? ??? ?var aname = document.getElementById("name");
?? ??? ??? ?var amessage = document.getElementById("message");
?? ??? ??? ?var amytext = document.getElementById("mytext");
?? ??? ??? ?var asubmit = document.getElementById("submit");
?? ??? ??? ?asubmit.onclick = function()
?? ??? ??? ?{
?? ??? ??? ??? ?amytext.value += aname.innerHTML + amessage.value +"\n\n" ;
?? ??? ??? ??? ?amessage.value = "";
?? ??? ??? ?}
?? ??? ?}
?? ?</script>
</head>
<body>
?? ?<form id="myform" method="post">
?? ??? ?<textarea id="mytext" rows="15" cols="40"></textarea><br>
?? ??? ?<div id="mydiv">
?? ??? ?<span id="name">丫丫：</span>
?? ??? ?<input type="text" name="message" id="message">
?? ??? ?<input type="button" value="發(fā)送" id="submit">
?? ??? ?</div>
?? ?</form>
</body>
</html>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: