LOGO OA教程 ERP教程 模切知識交流 PMS教程 CRM教程 開發文檔 其他文檔  
 
網站管理員

使用 HTML + JavaScript 實現仿微信桌面聊天界面（附完整代碼）
freeflydom
2025年8月8日 10:53 本文熱度 490

搭建基礎的HTML結構和樣式框架

頁面居中布局

為了讓整個應用在頁面中居中顯示，我們對 html 和 body 元素進行了如下設置：通過Flex布局，實現了水平和垂直居中，同時設置了背景色為灰色，模擬桌面應用程序的環境。

html,body {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #d9d9d9;
    margin: 0 auto;
}

主容器設計

.container 類定義了應用的主容器，這個容器具有以下特點：

  • 固定尺寸：910x640像素（微信桌面版的大致尺寸）
  • 白色背景，與灰色頁面背景形成對比
  • 添加了陰影效果，增強立體感
  • 使用Flex布局，便于內部組件排列
  • 圓角設計，提升視覺效果
.container {
    width: 910px;
    height: 640px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    display: flex;
    border-radius: 4px;
    position: relative;
}

添加側邊功能欄

引入圖標庫

首先，我們在 中引入了 Font Awesome 圖標庫，這將為我們提供豐富的圖標資源，用于美化界面元素。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"/>

新增側邊欄結構

在 .container 中，添加功能區（sidebar）。它包含四個圖標，分別代表：聊天會話（fa-comments）、群聊/聯系人（fa-user-group）、文件管理（fa-folder）、設置（fa-gear）。

<div class="sidebar">
  <div class="sidebar-item active"><i class="fa-solid fa-comments"></i></div>
  <div class="sidebar-item"><i class="fa-solid fa-user-group"></i></div>
  <div class="sidebar-item"><i class="fa-solid fa-folder"></i></div>
  <div class="sidebar-item"><i class="fa-solid fa-gear"></i></div>
</div>

側邊欄樣式設計

側邊欄整體樣式：寬度為60px，深灰色背景（#2e2e2e），使用Flex布局實現垂直排列，并通過 padding-top 在頂部留出20px的間距。

.sidebar {
    width: 60px;
    background-color: #2e2e2e;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 20px;
}

功能項樣式：每個功能項都是40x40像素的正方形，具有淺灰色背景（#3a3a3a）、圓角設計、居中顯示圖標、鼠標懸停時顯示手型光標、添加了背景色過渡動畫效果、圖標為白色、大小20px。

.sidebar-item {
    width: 40px;
    height: 40px;
    margin-bottom: 20px;
    background-color: #3a3a3a;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.3s;
    color: #fff;
    font-size: 20px;
}

交互效果：鼠標懸停時，背景色變為更淺的灰色（#4a4a4a）；當前激活項（active類）背景色為微信標志性的綠色（#07c160）

.sidebar-item:hover {
    background-color: #4a4a4a;
}
.sidebar-item.active {
    background-color: #07c160;
}

實現會話列表區域

新增會話列表結構

在 .container 中添加了會話列表區域，包含兩個主要部分：頂部搜索框區域（.chat-list-header）、聊天會話項列表（多個 .chat-item）。

<div class="chat-list">
  <div class="chat-list-header">
    <div class="search-box">
      <input type="text" placeholder="搜索">
    </div>
  </div>
  <div class="chat-item active">
    <div class="avatar">A</div>
    <div class="chat-info">
      <div class="chat-name">Alice</div>
      <div class="chat-preview">你好，最近怎么樣？</div>
    </div>
  </div>
  <!-- 更多聊天項... -->
</div>

會話列表樣式設計

會話列表容器：寬度為240px，淺灰色背景（#f5f5f5），右側添加了分隔線，使用Flex布局實現垂直排列。

.chat-list {
    width: 240px;
    background-color: #f5f5f5;
    border-right: 1px solid #e0e0e0;
    display: flex;
    flex-direction: column;
}

搜索框區域：高60px，包含一個輸入框用于搜索會話。輸入框去除了默認邊框和輪廓，提供簡潔的搜索體驗。

.chat-list-header {
    height: 60px;
    background-color: #f5f5f5;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #e0e0e0;
}
.search-box {
    flex: 1;
    height: 35px;
    background-color: #fff;
    border-radius: 4px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    border: 1px solid #e0e0e0;
}
.search-box input {
    border: none;
    outline: none;
    flex: 1;
    font-size: 14px;
}

聊天會話項：每個聊天項高70px，包含頭像和聊天信息。交互效果：鼠標懸停時背景色變淺、激活項具有更深的背景色。

.chat-item {
    height: 70px;
    padding: 10px;
    display: flex;
    align-items: center;
    cursor: pointer;
    border-bottom: 1px solid #e0e0e0;
    transition: background-color 0.3s;
}
.chat-item:hover {
    background-color: #e8e8e8;
}
.chat-item.active {
    background-color: #e0e0e0;
}

頭像和信息展示：頭像使用綠色背景和白色粗體字母，模擬用戶頭像；聊天信息區域包含聯系人姓名和最新消息預覽，消息預覽具有文本截斷效果。

.avatar {
    width: 45px;
    height: 45px;
    background-color: #07c160;
    border-radius: 4px;
    margin-right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: bold;
}
.chat-info {
    flex: 1;
    overflow: hidden;
}
.chat-name {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 4px;
    color: #333;
}
.chat-preview {
    font-size: 14px;
    color: #999;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

實現聊天主區域

新增聊天主區域結構

在 .container 中添加了聊天主區域，包含三個部分：

  1. 聊天頭部（.chat-header）- 顯示當前聊天對象名稱
  2. 消息顯示區域（.chat-messages）- 顯示聊天記錄
  3. 消息輸入區域（.chat-input）- 用戶輸入和發送消息
<div class="chat-area">
  <div class="chat-header">
    <div class="chat-title">Alice</div>
    <div class="chat-actions">
      <i class="fa-solid fa-ellipsis-h action-btn"></i>
    </div>
  </div>
  <div class="chat-messages">
    <div class="message received">
      <div class="avatar">A</div>
      <div class="message-bubble">你好，最近怎么樣？</div>
    </div>
     <!-- 更多消息... -->
  </div>
  <div class="chat-input">
    <div class="input-tools">
      <i class="fa-regular fa-face-smile tool-btn"></i>
      <i class="fa-solid fa-paperclip tool-btn"></i>
      <i class="fa-solid fa-image tool-btn"></i>
    </div>
    <div class="input-box">
      <textarea placeholder="輸入消息..."></textarea>
      <button class="send-btn">發送</button>
    </div>
  </div>
</div>

聊天主區域樣式設計

聊天區域容器：占據了剩余的610px寬度，使用Flex布局實現垂直排列。

.chat-area {
    width: 610px;
    display: flex;
    flex-direction: column;
}

聊天頭部：高60px，顯示當前聊天對象名稱，右側包含操作按鈕（目前只有一個省略號按鈕）；按鈕具有懸停效果，顏色會變為微信綠。

.chat-header {
    height: 60px;
    background-color: #f5f5f5;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
}
.chat-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
}
.chat-actions {
    display: flex;
    gap: 15px;
}
.action-btn {
    cursor: pointer;
    color: #666;
    font-size: 18px;
    transition: color 0.3s;
}
.action-btn:hover {
    color: #07c160;
}

消息顯示區域：使用滾動條處理大量消息；接收消息（.received）左對齊，使用白色氣泡；發送消息（.sent）右對齊，使用綠色氣泡（#95ec69）；消息氣泡最大寬度為60%，避免過寬。

.chat-messages {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    background-color: #f5f5f5;
}
.message {
    margin-bottom: 15px;
    display: flex;
    align-items: flex-start;
}
.message.sent {
    justify-content: flex-end;
}
.message-bubble {
    max-width: 60%;
    padding: 10px 15px;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1.5;
}
.message.received .message-bubble {
    background-color: #fff;
    margin-left: 10px;
}
.message.sent .message-bubble {
    background-color: #95ec69;
    margin-right: 10px;
}

消息輸入區域包含：

  1. 工具按鈕：表情、附件、圖片等（目前僅添加圖標）
  2. 文本輸入框：多行文本域，支持換行輸入
  3. 發送按鈕：綠色按鈕，具有懸停效果
.chat-input {
    height: 120px;
    background-color: #fff;
    border-top: 1px solid #e0e0e0;
    padding: 10px;
    display: flex;
    flex-direction: column;
}
.input-tools {
    height: 30px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.tool-btn {
    cursor: pointer;
    color: #666;
    font-size: 18px;
    transition: .3s;
}
.tool-btn:hover {
    color: #07c160;
}
.input-box {
    flex: 1;
    display: flex;
    gap: 10px;
}
.input-box textarea {
    flex: 1;
    border: none;
    outline: none;
    resize: none;
    font-size: 14px;
    padding: 5px;
}
.send-btn {
    width: 80px;
    height: 30px;
    background-color: #07c160;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    align-self: flex-end;
    transition: background-color 0.3s;
}
.send-btn:hover {
    background-color: #06a050;
}

添加基礎交互功能

新增JavaScript交互代碼

// 模擬發送消息
document.querySelector('.send-btn').addEventListener('click', function() {
  const textarea = document.querySelector('.input-box textarea');
  const message = textarea.value.trim();
  if (message) {
    const messagesContainer = document.querySelector('.chat-messages');
    const newMessage = document.createElement('div');
    newMessage.className = 'message sent';
    newMessage.innerHTML = `<div class="message-bubble">${message}</div>`;
    messagesContainer.appendChild(newMessage);
    textarea.value = '';
    messagesContainer.scrollTop = messagesContainer.scrollHeight;
  }
});
// 回車發送消息
document.querySelector('.input-box textarea').addEventListener('keypress', function(e) {
  if (e.key === 'Enter' && !e.shiftKey) {
    e.preventDefault();
    document.querySelector('.send-btn').click();
  }
});

功能實現解析

發送按鈕點擊事件：為發送按鈕（.send-btn）添加了點擊事件監聽器，當用戶點擊發送按鈕時會觸發消息發送邏輯。

document.querySelector('.send-btn').addEventListener('click', function() {
  // ...
});

消息發送處理邏輯：首先獲取輸入框中的文本內容，并去除首尾空白字符。只有當消息內容不為空時才進行后續處理。

const textarea = document.querySelector('.input-box textarea');
const message = textarea.value.trim();
if (message) {
  // 處理消息發送
}

創建并添加新消息：當有有效消息時，獲取消息顯示區域（.chat-messages），創建新的消息元素，并設置類名為 message sent（表示發送的消息），設置消息內容為用戶輸入的文本，將新消息添加到消息顯示區域。

const messagesContainer = document.querySelector('.chat-messages');
const newMessage = document.createElement('div');
newMessage.className = 'message sent';
newMessage.innerHTML = `<div class="message-bubble">${message}</div>`;
messagesContainer.appendChild(newMessage);

清空輸入框并滾動到最新消息，確保最新消息可見。

textarea.value = '';
messagesContainer.scrollTop = messagesContainer.scrollHeight;

回車發送消息功能：為文本輸入框添加了鍵盤事件監聽器，當用戶按下回車鍵（但不按Shift鍵）時阻止默認行為（避免在文本框中插入換行符），觸發發送按鈕的點擊事件，實現快速發送消息。

完整代碼

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>仿微信桌面聊天界面</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"/>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        html,body {
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #d9d9d9;
            margin: 0 auto;
        }
        .container {
            width: 910px;
            height: 640px;
            background-color: #fff;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
            display: flex;
            border-radius: 4px;
            position: relative;
        }
        /* 功能區樣式 */
        .sidebar {
            width: 60px;
            background-color: #2e2e2e;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-top: 20px;
        }
        .sidebar-item {
            width: 40px;
            height: 40px;
            margin-bottom: 20px;
            background-color: #3a3a3a;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: background-color 0.3s;
            color: #fff;
            font-size: 20px;
        }
        .sidebar-item:hover {
            background-color: #4a4a4a;
        }
        .sidebar-item.active {
            background-color: #07c160;
        }
        /* 會話列表樣式 */
        .chat-list {
            width: 240px;
            background-color: #f5f5f5;
            border-right: 1px solid #e0e0e0;
            display: flex;
            flex-direction: column;
        }
        .chat-list-header {
            height: 60px;
            background-color: #f5f5f5;
            padding: 10px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid #e0e0e0;
        }
        .search-box {
            flex: 1;
            height: 35px;
            background-color: #fff;
            border-radius: 4px;
            display: flex;
            align-items: center;
            padding: 0 10px;
            border: 1px solid #e0e0e0;
        }
        .search-box input {
            border: none;
            outline: none;
            flex: 1;
            font-size: 14px;
        }
        .chat-item {
            height: 70px;
            padding: 10px;
            display: flex;
            align-items: center;
            cursor: pointer;
            border-bottom: 1px solid #e0e0e0;
            transition: background-color 0.3s;
        }
        .chat-item:hover {
            background-color: #e8e8e8;
        }
        .chat-item.active {
            background-color: #e0e0e0;
        }
        .avatar {
            width: 45px;
            height: 45px;
            background-color: #07c160;
            border-radius: 4px;
            margin-right: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-weight: bold;
        }
        .chat-info {
            flex: 1;
            overflow: hidden;
        }
        .chat-name {
            font-size: 14px;
            font-weight: bold;
            margin-bottom: 4px;
            color: #333;
        }
        .chat-preview {
            font-size: 14px;
            color: #999;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .chat-area {
            width: 610px;
            display: flex;
            flex-direction: column;
        }
        .chat-header {
            height: 60px;
            background-color: #f5f5f5;
            border-bottom: 1px solid #e0e0e0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 20px;
        }
        .chat-title {
            font-size: 16px;
            font-weight: bold;
            color: #333;
        }
        .chat-actions {
            display: flex;
            gap: 15px;
        }
        .action-btn {
            cursor: pointer;
            color: #666;
            font-size: 18px;
            transition: color 0.3s;
        }
        .action-btn:hover {
            color: #07c160;
        }
        .chat-messages {
            flex: 1;
            padding: 20px;
            overflow-y: auto;
            background-color: #f5f5f5;
        }
        .message {
            margin-bottom: 15px;
            display: flex;
            align-items: flex-start;
        }
        .message.sent {
            justify-content: flex-end;
        }
        .message-bubble {
            max-width: 60%;
            padding: 10px 15px;
            border-radius: 4px;
            font-size: 14px;
            line-height: 1.5;
        }
        .message.received .message-bubble {
            background-color: #fff;
            margin-left: 10px;
        }
        .message.sent .message-bubble {
            background-color: #95ec69;
            margin-right: 10px;
        }
        .chat-input {
            height: 120px;
            background-color: #fff;
            border-top: 1px solid #e0e0e0;
            padding: 10px;
            display: flex;
            flex-direction: column;
        }
        .input-tools {
            height: 30px;
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 10px;
        }
        .tool-btn {
            cursor: pointer;
            color: #666;
            font-size: 18px;
            transition: .3s;
        }
        .tool-btn:hover {
            color: #07c160;
        }
        .input-box {
            flex: 1;
            display: flex;
            gap: 10px;
        }
        .input-box textarea {
            flex: 1;
            border: none;
            outline: none;
            resize: none;
            font-size: 14px;
            padding: 5px;
        }
        .send-btn {
            width: 80px;
            height: 30px;
            background-color: #07c160;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            align-self: flex-end;
            transition: background-color 0.3s;
        }
        .send-btn:hover {
            background-color: #06a050;
        }
    </style>
  </head>
  <body>
    <div class="container">
      <!-- 功能區 -->
      <div class="sidebar">
        <div class="sidebar-item active"><i class="fa-solid fa-comments"></i></div>
        <div class="sidebar-item"><i class="fa-solid fa-user-group"></i></div>
        <div class="sidebar-item"><i class="fa-solid fa-folder"></i></div>
        <div class="sidebar-item"><i class="fa-solid fa-gear"></i></div>
      </div>
      <!-- 會話列表 -->
      <div class="chat-list">
        <div class="chat-list-header">
          <div class="search-box">
            <input type="text" placeholder="搜索">
          </div>
        </div>
        <div class="chat-item active">
          <div class="avatar">A</div>
          <div class="chat-info">
            <div class="chat-name">Alice</div>
            <div class="chat-preview">你好，最近怎么樣？</div>
          </div>
        </div>
        <div class="chat-item">
          <div class="avatar">B</div>
          <div class="chat-info">
            <div class="chat-name">Bob</div>
            <div class="chat-preview">明天見！</div>
          </div>
        </div>
        <div class="chat-item">
          <div class="avatar">C</div>
          <div class="chat-info">
            <div class="chat-name">Carol</div>
            <div class="chat-preview">文件已經發給你了</div>
          </div>
        </div>
      </div>
      <!-- 聊天區 -->
      <div class="chat-area">
        <div class="chat-header">
          <div class="chat-title">Alice</div>
          <div class="chat-actions">
            <i class="fa-solid fa-ellipsis-h action-btn"></i>
          </div>
        </div>
        <div class="chat-messages">
          <div class="message received">
            <div class="avatar">A</div>
            <div class="message-bubble">你好，最近怎么樣？</div>
          </div>
          <div class="message sent">
            <div class="message-bubble">我很好，謝謝！你呢？</div>
          </div>
          <div class="message received">
            <div class="avatar">A</div>
            <div class="message-bubble">我也挺好的，周末有空一起喝咖啡嗎？</div>
          </div>
          <div class="message sent">
            <div class="message-bubble">好啊，周六下午怎么樣？</div>
          </div>
        </div>
        <div class="chat-input">
          <div class="input-tools">
            <i class="fa-regular fa-face-smile tool-btn"></i>
            <i class="fa-solid fa-paperclip tool-btn"></i>
            <i class="fa-solid fa-image tool-btn"></i>
          </div>
          <div class="input-box">
            <textarea placeholder="輸入消息..."></textarea>
            <button class="send-btn">發送</button>
          </div>
        </div>
      </div>
    </div>
  </body>
  <script>
    // 模擬發送消息
    document.querySelector('.send-btn').addEventListener('click', function() {
      const textarea = document.querySelector('.input-box textarea');
      const message = textarea.value.trim();
      if (message) {
        const messagesContainer = document.querySelector('.chat-messages');
        const newMessage = document.createElement('div');
        newMessage.className = 'message sent';
        newMessage.innerHTML = `<div class="message-bubble">${message}</div>`;
        messagesContainer.appendChild(newMessage);
        textarea.value = '';
        messagesContainer.scrollTop = messagesContainer.scrollHeight;
      }
    });
    // 回車發送消息
    document.querySelector('.input-box textarea').addEventListener('keypress', function(e) {
      if (e.key === 'Enter' && !e.shiftKey) {
        e.preventDefault();
        document.querySelector('.send-btn').click();
      }
    });
  </script>
</html>

轉自https://juejin.cn/post/7535350468588683318


該文章在 2025/8/8 10:53:28 編輯過
關鍵字查詢
相關文章
正在查詢...
點晴ERP是一款針對中小制造業的專業生產管理軟件系統,系統成熟度和易用性得到了國內大量中小企業的青睞。
點晴PMS碼頭管理系統主要針對港口碼頭集裝箱與散貨日常運作、調度、堆場、車隊、財務費用、相關報表等業務管理，結合碼頭的業務特點，圍繞調度、堆場作業而開發的。集技術的先進性、管理的有效性于一體，是物流碼頭及其他港口類企業的高效ERP管理信息系統。
點晴WMS倉儲管理系統提供了貨物產品管理,銷售管理,采購管理,倉儲管理,倉庫管理,保質期管理,貨位管理,庫位管理,生產管理,WMS管理系統,標簽打印,條形碼,二維碼管理,批號管理軟件。
點晴免費OA是一款軟件和通用服務都免費，不限功能、不限時間、不限用戶的免費OA協同辦公管理系統。
Copyright 2010-2025 ClickSun All Rights Reserved

黄频国产免费高清视频,久久不卡精品中文字幕一区,激情五月天AV电影在线观看,欧美国产韩国日本一区二区
亚洲精品456在线播放 | 婷婷影音先锋色 | 先锋影音AV资源在线高清 | 在线亚洲欧美日本专区 | 五月天婷婷亚洲综合 | 好吊操好吊妞在线观看妞 |