前端练习------仿微信聊天功能页面

📱 仿微信聊天功能页面

从零开始做一个能聊天的网页
HTML + CSS + JavaScript 实战 · 技术分享

---

📋 目录

一、先看效果
二、网页是怎么做出来的
三、HTML搭骨架
四、CSS穿衣服
五、JavaScript让页面动起来
六、完整代码
七、还能加什么功能

---

一、先看效果

🎯 我们要做的东西长这样：

核心功能：

• ✅ 顶部显示聊天对象名称
• ✅ 中间显示消息气泡（绿色是自己，白色是对方）
• ✅ 底部可以输入文字并发送
• ✅ 发送的消息实时显示在聊天区域

💡 为什么要做这个？

因为你每天都在用微信！用代码实现一个自己天天用的东西，超有成就感。而且这个项目包含了网页开发的三大核心技术，学会这个就能理解网页是怎么做出来的。

---

二、网页是怎么做出来的

一个网页的诞生需要三步：

步骤	技术	作用
第一步	HTML	搭骨架 - 就像盖房子要先搭框架，告诉浏览器这里有个标题，那里有个输入框
第二步	CSS	穿衣服 - 负责美化：改颜色、调位置、加圆角、加阴影
第三步	JavaScript	动起来 - 让按钮能点击、消息能发送

---

三、HTML搭骨架

📐 我们的聊天页面分成三块：

┌─────────────────────────────┐
│        聊天对象名称           │  ← 顶部
├─────────────────────────────┤
│                             │
│    💬 消息气泡区域           │  ← 中间
│                             │
├─────────────────────────────┤
│  [输入框...]        [发送]   │  ← 底部
└─────────────────────────────┘

📝 对应的代码：

<div class="chat-container">
    <!-- 顶部标题栏 -->
    <div class="chat-header">微信聊天</div>

    <!-- 中间消息区域 -->
    <div class="chat-messages" id="chatMessages"></div>

    <!-- 底部输入区域 -->
    <div class="chat-input">
        <input type="text" id="msgInput" placeholder="输入消息...">
        <button onclick="sendMessage()">发送</button>
    </div>
</div>

❓ <div> 是什么？

你可以把它理解成一个「盒子」。我们用盒子把页面分成一块一块的，这样后面就能单独设置每个盒子的样式。

---

四、CSS穿衣服

🎨 没有CSS的页面 vs 有CSS的页面：

状态	效果
没有 CSS	灰头土脸、没有样式
有 CSS	美观大方、有层次感

🔧 CSS的核心作用：

• 🎨 改颜色 - 让按钮变绿色，气泡变白或绿
• 📍 调位置 - 让消息靠左或靠右
• 🔘 加圆角 - 让气泡变圆润
• 🌟 加阴影 - 让页面有层次感

🔑 让消息左右对齐的秘诀 - Flexbox：

/* 自己的消息靠右 */
.message.self {
    display: flex;
    justify-content: flex-end; /* 靠右 */
}

/* 对方的消息靠左 */
.message.other {
    display: flex;
    justify-content: flex-start; /* 靠左 */
}

❓ Flexbox 是什么？

它是一种布局方式，专门用来解决「东西放哪」的问题。

• flex-start 是放左边
• center 是放中间
• flex-end 是放右边

---

五、JavaScript让页面动起来

🔄 点击「发送」后发生了什么？

用户输入文字
     ↓
点击发送按钮
     ↓
创建消息元素
     ↓
添加到聊天区域
     ↓
清空输入框
     ↓
滚动到最新消息

📝 代码实现：

function sendMessage() {
    // 1. 获取输入框的文字
    const text = msgInput.value;

    // 2. 创建一条新消息
    const messageDiv = document.createElement('div');
    messageDiv.className = 'message self';
    messageDiv.innerHTML = `
        <div class="bubble">${text}</div>
        <div class="avatar">我</div>
    `;

    // 3. 把消息加到聊天区域
    chatMessages.appendChild(messageDiv);

    // 4. 清空输入框
    msgInput.value = '';
}

💡 这段代码在做什么？

就像你发微信的过程：打字 → 点发送 → 消息出现在聊天列表 → 输入框清空。代码就是在模拟这个过程。

---

六、完整代码

📄 index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>微信聊天</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="chat-container">
        <div class="chat-header">微信聊天</div>
        <div class="chat-messages" id="chatMessages"></div>
        <div class="chat-input">
            <input type="text" id="msgInput" placeholder="输入消息...">
            <button onclick="sendMessage()">发送</button>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

🎨 style.css（核心部分）

.chat-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.message.self {
    justify-content: flex-end;
}

.message.self .bubble {
    background: #95EC69;
    border-radius: 8px 18px 18px 18px;
}

.message.other .bubble {
    background: #fff;
    border-radius: 18px 8px 18px 18px;
}

⚡ script.js（核心部分）

function sendMessage() {
    const text = msgInput.value.trim();
    if (!text) return;

    const div = document.createElement('div');
    div.className = 'message self';
    div.innerHTML = `
        <div class="bubble">${text}</div>
        <div class="avatar">我</div>
    `;

    chatMessages.appendChild(div);
    msgInput.value = '';
}

---

七、还能加什么功能

🚀 这个基础版本做好后，你可以继续添加：

功能	描述
👤 头像功能	每条消息旁边显示发送者的头像
🕐 时间戳	显示每条消息的发送时间
😊 表情包	点击表情按钮，选择表情发送
💾 保存记录	刷新页面后，聊天记录还在
👥 多人聊天	显示不同人的消息，区分自己和别人

---

心得体会

每个程序员都是从简单的项目开始的。这个聊天界面虽然简单，但包含了网页开发的三大核心技术。掌握了这些，你就能做出更厉害的东西！

---

🙏 谢谢观看！附上源码有有需可自行下载

⬇️ 点击下载完整源码（ZIP）

转载自 CSDN-专业IT技术社区

原文链接：https://blog.csdn.net/2301_80168944/article/details/161094268