【前端基础案例1】HTML + CSS + JavaScript

微信聊天窗口

DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
head>
<body>
    <div class="chat-container">
        <div class="chat-messages" id="chat-messages">div>
        <div class="chat-input">
            <input type="text" id="message-input" placeholder="输入消息...">
            <button id="send-button">发送button>
        div>
    div>
    <script src="script.js">script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

CSS（style.css）：

body {
    font-family: Arial, sans-serif;
}

.chat-container {
    width: 300px;
    margin: 0 auto;
    border: 1px solid #ccc;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    padding: 20px;
    border-radius: 10px;
}

.chat-messages {
    height: 300px;
    overflow-y: scroll;
    border: 1px solid #ccc;
    padding: 10px;
    margin-bottom: 10px;
}

.chat-input {
    display: flex;
    justify-content: space-between;
}

input[type="text"] {
    flex: 1;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

button {
    padding: 5px 10px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

JavaScript（script.js）：

document.addEventListener("DOMContentLoaded", function() {
    const messageInput = document.getElementById("message-input");
    const sendButton = document.getElementById("send-button");
    const chatMessages = document.getElementById("chat-messages");

    sendButton.addEventListener("click", function() {
        const messageText = messageInput.value;
        if (messageText.trim() !== "") {
            const messageDiv = document.createElement("div");
            messageDiv.classList.add("message");
            messageDiv.textContent = messageText;
            chatMessages.appendChild(messageDiv);
            messageInput.value = "";

            // 模拟回复消息
            setTimeout(function() {
                const replyDiv = document.createElement("div");
                replyDiv.classList.add("message", "reply");
                replyDiv.textContent = "这是一个自动回复。";
                chatMessages.appendChild(replyDiv);
                chatMessages.scrollTop = chatMessages.scrollHeight;
            }, 1000);
        }
    });

    // 模拟初始消息
    const initialMessage = document.createElement("div");
    initialMessage.classList.add("message", "reply");
    initialMessage.textContent = "欢迎使用聊天窗口！";
    chatMessages.appendChild(initialMessage);
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

在这里插入图片描述

相关阅读:
【电源专题】案例：芯片规格书使能定义高电平最小阈值1.4V，那真的是到1.4V时才开始输出？
（学习日记）2022.8.4
配置中心 SpringCloud Config
坦克车机器人操作学习总结开始篇
leetcode 剑指offer49：丑数
ld: symbol(s) not found for architecture arm64
el-table ＜template slot=“header“＞不更新问题
内存池的实现4 alloc内存池
数据结构编写程序出现syntax error before '&' token怎么修改
6-8 舞伴问题分数 15

原文地址：https://blog.csdn.net/XiugongHao/article/details/133134634