亚洲乱色熟女一区二区三区丝袜,天堂√中文最新版在线,亚洲精品乱码久久久久久蜜桃图片,香蕉久久久久久av成人,欧美丰满熟妇bbb久久久

LOGO OA教程 ERP教程 模切知識交流 PMS教程 CRM教程 開發(fā)文檔 其他文檔  
 
網(wǎng)站管理員

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

搭建基礎(chǔ)的HTML結(jié)構(gòu)和樣式框架

頁面居中布局

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

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

主容器設(shè)計

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

  • 固定尺寸：910x640像素（微信桌面版的大致尺寸）
  • 白色背景，與灰色頁面背景形成對比
  • 添加了陰影效果，增強立體感
  • 使用Flex布局，便于內(nèi)部組件排列
  • 圓角設(shè)計，提升視覺效果
.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;
}

添加側(cè)邊功能欄

引入圖標(biāo)庫

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

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

新增側(cè)邊欄結(jié)構(gòu)

在 .container 中，添加功能區(qū)（sidebar）。它包含四個圖標(biāo)，分別代表：聊天會話（fa-comments）、群聊/聯(lián)系人（fa-user-group）、文件管理（fa-folder）、設(shè)置（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>

側(cè)邊欄樣式設(shè)計

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

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

功能項樣式：每個功能項都是40x40像素的正方形，具有淺灰色背景（#3a3a3a）、圓角設(shè)計、居中顯示圖標(biāo)、鼠標(biāo)懸停時顯示手型光標(biāo)、添加了背景色過渡動畫效果、圖標(biāo)為白色、大小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;
}

交互效果：鼠標(biāo)懸停時，背景色變?yōu)楦鼫\的灰色（#4a4a4a）；當(dāng)前激活項（active類）背景色為微信標(biāo)志性的綠色（#07c160）

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

實現(xiàn)會話列表區(qū)域

新增會話列表結(jié)構(gòu)

在 .container 中添加了會話列表區(qū)域，包含兩個主要部分：頂部搜索框區(qū)域（.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>

會話列表樣式設(shè)計

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

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

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

.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，包含頭像和聊天信息。交互效果：鼠標(biāo)懸停時背景色變淺、激活項具有更深的背景色。

.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;
}

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

.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;
}

實現(xiàn)聊天主區(qū)域

新增聊天主區(qū)域結(jié)構(gòu)

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

  1. 聊天頭部（.chat-header）- 顯示當(dāng)前聊天對象名稱
  2. 消息顯示區(qū)域（.chat-messages）- 顯示聊天記錄
  3. 消息輸入?yún)^(qū)域（.chat-input）- 用戶輸入和發(fā)送消息
<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">發(fā)送</button>
    </div>
  </div>
</div>

聊天主區(qū)域樣式設(shè)計

聊天區(qū)域容器：占據(jù)了剩余的610px寬度，使用Flex布局實現(xiàn)垂直排列。

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

聊天頭部：高60px，顯示當(dāng)前聊天對象名稱，右側(cè)包含操作按鈕（目前只有一個省略號按鈕）；按鈕具有懸停效果，顏色會變?yōu)槲⑿啪G。

.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;
}

消息顯示區(qū)域：使用滾動條處理大量消息；接收消息（.received）左對齊，使用白色氣泡；發(fā)送消息（.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;
}

消息輸入?yún)^(qū)域包含：

  1. 工具按鈕：表情、附件、圖片等（目前僅添加圖標(biāo)）
  2. 文本輸入框：多行文本域，支持換行輸入
  3. 發(fā)送按鈕：綠色按鈕，具有懸停效果
.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;
}

添加基礎(chǔ)交互功能

新增JavaScript交互代碼

// 模擬發(fā)送消息
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;
  }
});
// 回車發(fā)送消息
document.querySelector('.input-box textarea').addEventListener('keypress', function(e) {
  if (e.key === 'Enter' && !e.shiftKey) {
    e.preventDefault();
    document.querySelector('.send-btn').click();
  }
});

功能實現(xiàn)解析

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

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

消息發(fā)送處理邏輯：首先獲取輸入框中的文本內(nèi)容，并去除首尾空白字符。只有當(dāng)消息內(nèi)容不為空時才進(jìn)行后續(xù)處理。

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

創(chuàng)建并添加新消息：當(dāng)有有效消息時，獲取消息顯示區(qū)域（.chat-messages），創(chuàng)建新的消息元素，并設(shè)置類名為 message sent（表示發(fā)送的消息），設(shè)置消息內(nèi)容為用戶輸入的文本，將新消息添加到消息顯示區(qū)域。

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;

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

完整代碼

<!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;
        }
        /* 功能區(qū)樣式 */
        .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">
      <!-- 功能區(qū) -->
      <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">文件已經(jīng)發(fā)給你了</div>
          </div>
        </div>
      </div>
      <!-- 聊天區(qū) -->
      <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">發(fā)送</button>
          </div>
        </div>
      </div>
    </div>
  </body>
  <script>
    // 模擬發(fā)送消息
    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;
      }
    });
    // 回車發(fā)送消息
    document.querySelector('.input-box textarea').addEventListener('keypress', function(e) {
      if (e.key === 'Enter' && !e.shiftKey) {
        e.preventDefault();
        document.querySelector('.send-btn').click();
      }
    });
  </script>
</html>

轉(zhuǎn)自https://juejin.cn/post/7535350468588683318


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