JavaScript实现简易QQ聊天界面
本文介绍如何使用JavaScript、HTML和CSS制作一个简易的聊天界面。通过获取用户输入并动态追加到显示区域，实现消息发送与清空功能。代码包含基本的DOM元素获取、事件监听及字符串拼接逻辑，适合初学者学习前端基础交互。
本文分享了一个使用JavaScript编写的简易QQ聊天界面示例，供读者参考学习。
题目要求：
设计一个简易聊天界面。用户在底部的文本框中输入内容后，点击发送按钮，输入的信息将显示在界面中部的信息显示区域。同时，输入框内容需被清空，以便接收下一条消息。显示的消息应从上至下依次排列。
操作界面如下图所示：
题目分析：
1. 需要文本框（text）用于用户输入信息； 2. 需要按钮（button）用于触发发送动作； 3. 信息需显示在信息显示区域，本文选用textarea元素（也可使用div）； 4. 点击发送后，需清空文本框中的内容。
代码分析：
<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="发送" id="submit">
</div>
</form>
</body>该部分代码负责在HTML页面中构建基本操作界面； 设置textarea的大小为rows="15" cols="40"； 此模块中的div标签用于为输入文本框和按钮设置背景色。
<style type="text/css">
#mydiv
{
background-color: pink;
width:300px;
}
#mytext
{
border:2px pink dotted;
text-align: left;
}
</style>为界面添加CSS样式；
1. #mydiv：为id为“mydiv”的元素设置样式； 2. #mytext：为id为“mytext”的元素设置样式；
border:2px pink dotted;
text-align: left;border：设置2像素大小、粉色、点状边框； 内容显示为居左对齐。
<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()：页面加载完成后开始执行； 由于文本域显示的内容是逐条追加的，因此使用 += 进行赋值； aname.innerText： 获取name元素的内容可通过.innerHTML或.innerText实现，区别在于.innerHTML包含从对象起始到终止的所有内容（包括HTML标签），而.innerText仅获取文本内容（去除HTML标签/样式）。
var asubmit = document.getElementById("submit");
asubmit.onclick = function(){ }首先获取发送按钮的动作，并为此动作添加事件，具体事件内容编写在大括号{ }中；
amessage.value = "";该语句的作用是在每次发送文本框内容后，自动清空上一条内容，为接收下一条内容做准备；若缺少此语句，则会出现以下情况：
图中用红色笔圈出的部分所示问题。
源代码
<!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="发送" id="submit">
</div>
</form>
</body>
</html>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。
JS监听滚动事件：回到顶部按钮的显示与隐藏逻辑
2026-11-05 16:19:37
JavaScript怎么读写LocalStorage与SessionStorage
2026-11-05 15:40:11
anime.js 与 GSAP 对比：轻量级项目该怎么选择动画库
2026-11-05 11:24:55
flv.js 与 hls.js 在直播场景下的选型对比
2026-11-05 08:18:52
JavaScript能做什么？前端开发中的作用与应用场景解析
2026-11-04 23:17:54