前端开发 -- 自动回复机器人【附完整源码】

一：效果展示

本项目实现了一个简单的网页聊天界面，用户可以在输入框中输入消息，并点击发送按钮或按下回车键来发送消息。机器人会根据用户发送的消息内容，通过关键字匹配来生成自动回复。

二：源代码分享

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>关键字自动回复</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
            overflow: hidden;
        }

        .chat-title {
            text-align: center;
            padding: 10px;
            font-weight: bold;
            border-bottom: 2px solid #ccc;
        }

        .chat-container {
            width: 300px;
            border: 2px solid #ccc;
            border-radius: 5px;
            background-color: #fff;
            display: flex;
            flex-direction: column;
            max-height: 90vh;
        }
        .chat-window {
            flex: 1;
            padding: 10px;
            overflow-y: auto;
            border-bottom: 2px solid #ccc;
        }
        .chat-window div {
            display: flex;
            margin-bottom: 10px;
        }
        .user-message {
            justify-content: flex-end;
            color: #007bff;
        }
        .bot-message {
            justify-content: flex-start;
            color: #28a745;
        }
        .message-content {
            display: flex;
            align-items: center;
        }
        .message-content img {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            margin-right: 5px; 
        }
        .message-text {
            max-width: 200px; 
            padding: 5px;
            border-radius: 5px;
            word-wrap: break-word; 
            white-space: normal; 
        }
        .user-message .message-content {
            gap: 5px;
        }
        .user-message .message-text {
            background-color: #e9f5ff;
        }
        .bot-message .message-text {
            background-color: #d1f9d1;
        }
        .input-container {
            display: flex;
            padding: 10px;
        }
        #userInput {
            flex: 1;
            padding: 5px;
            border: 1px solid #ccc;
            border-radius: 3px;
        }
        #sendButton {
            padding: 5px 10px;
            margin-left: 5px;
            border: 1px solid #ccc;
            background-color: #007bff;
            color: #fff;
            border-radius: 3px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="chat-container">
        <div class="chat-title">自动回复机器人</div>
        <div class="chat-window" id="chatWindow">
        </div>
        <div class="input-container">
            <input type="text" id="userInput" placeholder="请输入......">
            <button id="sendButton">发送</button>
        </div>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const chatWindow = document.getElementById('chatWindow');
            const userInput = document.getElementById('userInput');
            const sendButton = document.getElementById('sendButton');

            sendButton.addEventListener('click', sendMessage);
            userInput.addEventListener('keypress', (e) => {
                if (e.key === 'Enter') {
                    sendMessage();
                }
            });

            function sendMessage() {
                const userMessage = userInput.value.trim();
                if (userMessage) {
                    addMessage(userMessage, 'user');

                    // 使用本地生成的回复
                    const reply = generateAIReply(userMessage);
                    addMessage(reply, 'bot');
                    userInput.value = '';
                }
            }

            function generateAIReply(message) {
                message = message.toLowerCase();
                if (message.includes("你好") || message.includes("hi")) {
                    return "你好！有什么我可以帮助你的吗？";
                } else if (message.includes("你想我吗")) {
                    return "我当然想和你聊天啦！";
                } else if (message.includes("你在干嘛")) {
                    return "我正在用人类的语言和你聊天呢！";
                } else if (message.includes("现在几点")) {
                    return "当前时间为：" + new Date().toLocaleTimeString();
                } else {
                    return "我不太明白你的意思，可以说得更清楚一些吗？";
                }
            }

            function addMessage(message, sender) {
                const messageElement = document.createElement('div');
                messageElement.className = sender === 'user' ? 'user-message' : 'bot-message';

                const messageContent = document.createElement('div');
                messageContent.className = 'message-content';

                const text = document.createElement('span');
                text.className = 'message-text';
                text.textContent = message;
                messageContent.appendChild(text);

                const avatar = document.createElement('img');
                if (sender === 'user') {
                    avatar.src = '头像1.jpg'; // 用户头像链接
                    messageContent.appendChild(avatar); 
                } else {
                    avatar.src = '头像2.jpg'; // 机器人头像链接
                    messageContent.insertBefore(avatar, text); 
                }

                messageElement.appendChild(messageContent);
                chatWindow.appendChild(messageElement);
                chatWindow.scrollTop = chatWindow.scrollHeight;
            }
        });
    </script>
</body>
</html>

三：代码分析

1.`HTML`结构

<!DOCTYPE html>
<!-- 定义HTML文档的语言为英文 -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 设置视口，使页面在移动设备上以合适的比例显示，宽度等于设备宽度，初始缩放比例为1 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 设置网页的标题 -->
    <title>关键字自动回复</title>
    <style>
        /* CSS样式在这里定义,用于美化页面 */
    </style>
</head>
<body>
    <!-- 定义一个容器，用于包含聊天界面的所有元素 -->
    <div class="chat-container">
        <!-- 定义聊天窗口的标题 -->
        <div class="chat-title">自动回复机器人</div>
        <!-- 定义聊天窗口，用于显示聊天内容，设置id以便JS操作 -->
        <div class="chat-window" id="chatWindow"></div>
        <!-- 定义一个容器，包含输入框和发送按钮 -->
        <div class="input-container">
            <!-- 定义一个文本输入框，用户在此输入信息 -->
            <input type="text" id="userInput" placeholder="请输入......"> 
            <!-- 定义一个按钮，用户点击后发送输入框中的内容 -->
            <button id="sendButton">发送</button>            
        </div>
    </div>
    <script>
        // JavaScript代码在这里，用于实现页面的交互功能
    </script>
</body>
</html>

<head>部分：定义了文档的元数据，包括窗口设置和标题，以及内嵌的CSS样式。
<body>部分：包含一个聊天容器，其中包括聊天标题、聊天窗口和输入容器。

2.`CSS`结构


body {
    font-family: Arial, sans-serif;
    /* 设置页面整体字体为Arial，如果Arial不可用则使用sans-serif作为备用 */
    display: flex;
    /* 使用Flexbox布局，使子元素能够灵活排列 */
    justify-content: center;
    /* 水平方向上居中对齐子元素 */
    align-items: center;
    /* 垂直方向上居中对齐子元素 */
    height: 100vh;
    /* 设置页面高度为视口高度的100%，确保页面占满整个屏幕 */
    margin: 0;
    /* 移除默认的页面外边距 */
    background-color: #f0f0f0;
    /* 设置页面背景颜色为浅灰色 */
    overflow: hidden;
    /* 隐藏超出视口的内容，防止滚动条出现 */
}
 
.chat-title {
    text-align: center;
    /* 标题文本居中对齐 */
    padding: 10px;
    /* 在标题周围添加内边距，使其与边框有一定距离 */
    font-weight: bold;
    /* 设置标题字体为粗体 */
    border-bottom: 2px solid #ccc;
    /* 在标题下方添加一条2像素宽的灰色边框 */
}
 
.chat-container {
    width: 300px;
    /* 设置聊天容器的宽度为300像素 */
    border: 2px solid #ccc;
    /* 为聊天容器添加2像素宽的灰色边框 */
    border-radius: 5px;
    /* 设置聊天容器的边框圆角为5像素 */
    background-color: #fff;
    /* 设置聊天容器背景颜色为白色 */
    display: flex;
    /* 使用Flexbox布局，使聊天窗口和输入框能够灵活排列 */
    flex-direction: column;
    /* 设置Flexbox方向为垂直，使子元素垂直排列 */
    max-height: 90vh;
    /* 设置聊天容器的最大高度为视口高度的90% */
}
 
.chat-window {
    flex: 1;
    /* 使聊天窗口占据可用空间的剩余部分 */
    padding: 10px;
    /* 在聊天窗口内部添加内边距 */
    overflow-y: auto;
    /* 如果内容超出可视区域，允许垂直滚动 */
    border-bottom: 2px solid #ccc;
    /* 在聊天窗口底部添加一条2像素宽的灰色边框 */
}
 
.chat-window div {
    display: flex;
    /* 使用Flexbox布局，使消息能够灵活排列 */
    margin-bottom: 10px;
    /* 在每个消息下方添加10像素的外边距 */
}
 
.user-message {
    justify-content: flex-end;
    /* 将用户消息右对齐 */
    color: #007bff;
    /* 设置用户消息文本颜色为蓝色 */
}
 
.bot-message {
    justify-content: flex-start;
    /* 将机器人消息左对齐 */
    color: #28a745;
    /* 设置机器人消息文本颜色为绿色 */
}
 
.message-content {
    display: flex;
    /* 使用Flexbox布局，使头像和文本能够水平排列 */
    align-items: center;
    /* 垂直居中对齐头像和文本 */
}
 
.message-content img {
    width: 30px;
    /* 设置头像宽度为30像素 */
    height: 30px;
    /* 设置头像高度为30像素 */
    border-radius: 50%;
    /* 设置头像为圆形 */
    margin-right: 5px;
    /* 给头像右边添加5像素的外边距 */
}
 
.message-text {
    max-width: 200px;
    /* 控制消息文本的最大宽度 */
    padding: 5px;
    /* 在消息文本周围添加内边距 */
    border-radius: 5px;
    /* 设置消息文本的边框圆角为5像素 */
    word-wrap: break-word;
    /* 确保长单词也能换行 */
    white-space: normal;
    /* 允许文本内的空白符正常显示，允许换行 */
}
 
.user-message .message-content {
    gap: 5px;
    /* 使用gap属性增加头像和文本之间的间距 */
}
 
.user-message .message-text {
    background-color: #e9f5ff;
    /* 设置用户消息背景颜色为浅蓝色 */
}
 
.bot-message .message-text {
    background-color: #d1f9d1;
    /* 设置机器人消息背景颜色为浅绿色 */
}
 
.input-container {
    display: flex;
    /* 使用Flexbox布局，使输入框和按钮能够水平排列 */
    padding: 10px;
    /* 在输入容器内部添加内边距 */
}
 
#userInput {
    flex: 1;
    /* 使输入框占据可用空间的剩余部分 */
    padding: 5px;
    /* 在输入框内部添加内边距 */
    border: 1px solid #ccc;
    /* 为输入框添加1像素宽的灰色边框 */
    border-radius: 3px;
    /* 设置输入框的边框圆角为3像素 */
}
 
#sendButton {
    padding: 5px 10px;
    /* 在按钮内部添加内边距，上下5像素，左右10像素 */
    margin-left: 5px;
    /* 在按钮左边添加5像素的外边距，与输入框保持一定距离 */
    border: 1px solid #ccc;
    /* 为按钮添加1像素宽的灰色边框 */
    background-color: #007bff;
    /* 设置按钮背景颜色为蓝色 */
    color: #fff;
    /* 设置按钮文本颜色为白色 */
    border-radius: 3px;
    /* 设置按钮的边框圆角为3像素 */
    cursor: pointer;
    /* 当鼠标悬停在按钮上时，显示为手型光标，表示可点击 */
}

布局与对齐：使用Flexbox布局来实现元素的居中对齐和分布，使得聊天界面在不同设备上都能保持良好的显示效果。
样式与主题：通过颜色和背景的设置，区分用户消息和机器人消息，增强用户体验。使用圆角、边距和内边距来增加视觉层次和舒适度。
响应式设计：通过设置最大高度和允许滚动，确保聊天窗口在内容过多时不会破坏页面的整体布局。

3.`JavaScript`结构

document.addEventListener('DOMContentLoaded', () => {
    // 当DOM内容加载完毕后，执行以下代码

    const chatWindow = document.getElementById('chatWindow');
    // 获取页面中ID为'chatWindow'的元素，用于显示聊天消息

    const userInput = document.getElementById('userInput');
    // 获取页面中ID为'userInput'的元素，用于用户输入消息

    const sendButton = document.getElementById('sendButton');
    // 获取页面中ID为'sendButton'的元素，即发送消息的按钮

    sendButton.addEventListener('click', sendMessage);
    // 为发送按钮添加点击事件监听器，点击时调用sendMessage函数

    userInput.addEventListener('keypress', (e) => {
        // 为用户输入框添加键盘按键事件监听器
        if (e.key === 'Enter') {
            // 如果按下的键是'Enter'（回车键）
            sendMessage();
            // 调用sendMessage函数发送消息
        }
    });

    function sendMessage() {
        // 定义sendMessage函数，用于处理消息发送逻辑
        const userMessage = userInput.value.trim();
        // 获取用户输入框的值，并去除首尾空白
        if (userMessage) {
            addMessage(userMessage, 'user');
            // 调用addMessage函数，将用户消息添加到聊天窗口
            const reply = generateAIReply(userMessage);
            // 调用generateAIReply函数，生成AI的回复
            addMessage(reply, 'bot');
            // 调用addMessage函数，将AI的回复添加到聊天窗口
            userInput.value = '';
            // 清空用户输入框
        }
    }

    function generateAIReply(message) {
        // 定义generateAIReply函数，用于生成AI的回复
        message = message.toLowerCase();
        // 将用户消息转换为小写，以便进行不区分大小写的匹配
        if (message.includes("你好") || message.includes("hi")) {
            // 如果消息包含"你好"或"hi"
            return "你好！有什么我可以帮助你的吗？";
            // 返回AI的问候语
        }
        // 其他关键字回复
        else {
            // 如果消息不包含上述关键字
            return "我不太明白你的意思，可以说得更清楚一些吗？";
            // 返回AI的不理解回复
        }
    }

    function addMessage(message, sender) {
        // 定义addMessage函数，用于将消息添加到聊天窗口
        const messageElement = document.createElement('div');
        // 创建一个div元素，作为消息容器
        messageElement.className = sender === 'user' ? 'user-message' : 'bot-message';
        // 根据发送者（用户或AI）设置消息容器的类名

        const messageContent = document.createElement('div');
        // 创建一个div元素，作为消息内容的容器
        messageContent.className = 'message-content';
        // 设置消息内容容器的类名

        const text = document.createElement('span');
        // 创建一个span元素，用于显示消息文本
        text.className = 'message-text';
        // 设置消息文本的类名
        text.textContent = message;
        // 设置消息文本的内容
        messageContent.appendChild(text);
        // 将消息文本添加到消息内容容器中

        const avatar = document.createElement('img');
        // 创建一个img元素，用于显示发送者的头像
        if (sender === 'user') {
            avatar.src = '头像1.jpg';
            // 设置头像的图片源为用户头像
            messageContent.appendChild(avatar);
        } else {
            avatar.src = '头像2.jpg';
            // 设置头像的图片源为AI头像
            messageContent.insertBefore(avatar, text);
        }

        messageElement.appendChild(messageContent);
        // 将消息内容容器添加到消息容器中
        chatWindow.appendChild(messageElement);
        // 将消息容器添加到聊天窗口中
        chatWindow.scrollTop = chatWindow.scrollHeight;
        // 将聊天窗口滚动到最底部，以便显示最新消息
    }
});