当前位置：首页 > news >正文

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

news 文章来源：https://blog.csdn.net/qiao_yue/article/details/144755335 2025/5/25 5:09:58

一：效果展示

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

二：源代码分享

<!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;// 将聊天窗口滚动到最底部，以便显示最新消息}
});

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

一：效果展示本项目实现了一个简单的网页聊天界面，用户可以在输入框中输入消息，并点击发送按钮或按下回车键来发送消息。机器人会根据用户发送的消息内容，通过关键字匹配来生成自动回复。二：源代码分享 <!DOCTYP…...

编程日记 2024/12/31 1:39:42

vue+echarts实现疫情折线图

效果： 代码： <<template><div><div id"left1" style "height:800px;width:100%"></div></div> </template><script> //疫情数据//export default {data() {return {data:{//疫情数据…...

编程日记 2024/12/31 1:38:40

服务器nfs文件共享

1. 配置 NFS 服务器（NFS Server）在 Ubuntu/Debian 上： sudo apt update sudo apt install nfs-kernel-server在 CentOS/RHEL 上： sudo yum install nfs-utils1.2 创建共享目录选择一个要共享的目录，并确保该目录的权限正确设置。例如，假设我们要共享 /srv/nfs 目录…...

编程日记 2024/12/31 1:35:38

基于Vue+SSM+SpringCloudAlibaba的科目课程管理系统

功能1：科目列表功能2：条件查询功能3：分页查询功能4：excel批量导入功能5：修改功能6：删除...

编程日记 2024/12/31 1:30:33

vue3配置caddy作为静态服务器，在浏览器地址栏刷新出现404

vue3配置caddy作为静态服务器，在浏览器地址栏刷新出现404 1 情况描述2 原因3 配置 1 情况描述在vue打包之后，形成dist文件，采用caddy作为静态资源服务器。在浏览器中输入域名时可以访问网站，但是，进过路由导航栏内部…...

编程日记 2024/12/31 1:23:27

深入理解委托：C# 编程中的强大工具

在面向对象编程中，委托（Delegate） 是一个非常强大且灵活的概念，特别是在 C# 编程语言中。它不仅仅是函数指针的替代品，还提供了更高层次的抽象，使得代码更加简洁、灵活和可维护。在这篇博客中，我…...

编程日记 2024/12/31 1:22:25

【Java 数据结构】合并两个有序链表

🔥博客主页🔥：【坊钰_CSDN博客】欢迎各位点赞👍评论✍收藏⭐ 目录 1. 题目 2. 解析 3. 代码实现 4. 小结 1. 题目将两个升序链表合并为一个新的升序链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。示…...

编程日记 2024/12/31 1:19:22

基于微信小程序的校园访客登记系统

基于微信小程序的校园访客登记系统功能列表用户端功能注册与登录 ：支持用户通过手机号短信验证码注册和登录。个人资料管理 ：允许用户编辑和更新个人信息及其密码。站内信消息通知：通知公告。来访预约：提交来访预约支持车牌…...

编程日记 2024/12/31 1:18:21

uniapp 判断多选、选中取消选中的逻辑处理

一、效果展示二、代码 1.父组件： :id=“this.id” ：给子组件传递参数【id】 @callParentMethod=“takeIndexFun” ：给子组件传递方法，这样可以在子组件直接调用父组件的方法 <view @click="$refs.member.open()"...

编程日记 2024/12/31 1:17:20

php8.0版本更新了哪些内容

PHP 8.0版本是PHP语言的一个重要更新，它引入了许多新特性和改进，旨在提高性能、增强代码的可读性和可维护性。以下是PHP 8.0版本更新的主要内容： 一、性能提升 JIT编译器：PHP 8.0引入了Just-In-Time（JIT）…...

编程日记 2024/12/31 1:14:17

Browser Use：AI智能体自动化操作浏览器的开源工具

Browser Use：AI智能体自动化操作浏览器的开源工具 Browser Use 简介1. 安装所需依赖2. 生成openai密钥3. 编写代码4. 运行代码5. 部署与优化5.1 部署AI代理5.2 优化与扩展总结Browser Use 简介 browser-use是一个Python库，它能够帮助我们将AI代理与浏览器自动化操作结合起来；…...

编程日记 2024/12/31 1:11:14

Android笔记(四十)：ViewPager2嵌套RecyclerView滑动冲突进一步解决

背景 ViewPager2内嵌套横向滑动的RecyclerView，会有滑动冲突的情况，引入官方提供的NestedScrollableHost类可以解决冲突问题，但是有一些瑕疵，滑动横向RecyclerView到顶部，按住它不放手继续往左拖再往右拖，这…...

编程日记 2024/12/31 1:10:11

POS系统即销售点系统文档与数据库设计

POS系统即销售点系统，是一种用于商业交易的软硬件集成系统，主要用于管理销售、库存、客户信息等，以下是其详细介绍： 1. 系统组成硬件部分 ： 收银终端：包括传统的台式收银机、平板电脑、智能手机等设备&a…...

编程日记 2024/12/31 1:08:08

安全合规遇 AI 强援：深度驱动行业发展新引擎 | 倍孜网络CEO聂子尧出席ICT深度观察报告会！

12月24日，2025中国信通院深度观察报告会科技伦理与合规发展分论坛在北京举办。本次分论坛主题为“伦理先行，合规致远”，聚焦互联网广告合规治理、移动终端应用生态治理、短视频平台责任限度等前沿话题进行分享与探讨。工业和信息化部领导&…...

编程日记 2024/12/31 1:07:07

算法进阶：贪心算法

贪心算法是一种简单而直观的算法思想，它在每一步选择中都采取在当前状态下最优的选择，以期望最终得到全局最优解。贪心算法通常适用于一些具有最优子结构的问题，即问题的最优解可以通过一系列局部最优解的选择得到。贪心算法的基本思路是&a…...

编程日记 2024/12/31 1:05:05

C++ 设计模式：工厂方法（Factory Method）

链接：C 设计模式链接：C 设计模式 - 抽象工厂链接：C 设计模式 - 原型模式链接：C 设计模式 - 建造者模式工厂方法（Factory Method）是创建型设计模式之一，它提供了一种创建对象的接口&#xf…...

编程日记 2024/12/31 1:01:00

手机联系人查询添加操作

Android——添加联系人_android 添加联系人-CSDN博客上面连接添加联系人已测试是可以 Android : 获取、添加、手机联系人-ContentResolver简单应用_contentresolver 添加联系人-CSDN博客...

编程日记 2024/12/31 0:59:58

【LeetCode】2506、统计相似字符串对的数目

【LeetCode】2506、统计相似字符串对的数目文章目录一、哈希表位运算1.1 哈希表位运算二、多语言解法一、哈希表位运算 1.1 哈希表位运算每个字符串, 可用一个 int 表示. (每个字符是 int 的一个位) 哈希表记录各字符组合出现的次数步骤: 遇到一个字符串, 得到 ma…...

编程日记 2024/12/31 0:52:50

金仓数据库对象访问权限的管理

基础知识对象的分类数据库的表、索引、视图、缺省值、规则、触发器等等，都称为数据库对象，对象分为如下两类: 模式(SCHEMA)对象:可以理解为一个存储目录，包含视图、索引、数据类型、函数和操作符等。非模式对象:其他的数据库对象&#x…...

编程日记 2024/12/31 0:51:48

Qt 中实现系统主题感知

【写在前面】在现代桌面应用程序开发中，系统主题感知是一项重要的功能，它使得应用程序能够根据用户的系统主题设置（如深色模式或浅色模式）自动调整其外观。 Qt 作为一个跨平台的C图形用户界面应用程序开发框架，提供…...

编程日记 2024/12/31 0:50:47

Modbus TCP 报文说明

Modbus TCP 报文说明 Modbus TCP 报文结构报文解析功能码说明Modbus 功能码与 PLC 地址的对应关系 Modbus TCP 报文结构事务标识符（Transaction Identifier，2 字节）： 用于匹配请求和响应，通常由客户端生成&#xff0…...

编程日记 2024/12/31 0:49:46

音视频入门基础：MPEG2-TS专题（24）——FFmpeg源码中，显示TS流每个packet的pts、dts的实现

音视频入门基础：MPEG2-TS专题系列文章： 音视频入门基础：MPEG2-TS专题（1）——MPEG2-TS官方文档下载音视频入门基础：MPEG2-TS专题（2）——使用FFmpeg命令生成ts文件音视频入门基础…...

编程日记 2024/12/31 0:46:42

大模型：OneFitsAll、Time - LLM、LLaTA

LLM数据集：ETT、Illness、Weather ETT、Illness、Weather在上述提到的论文中都是用于时间序列预测研究的真实世界数据集，以下是对它们的具体介绍： ETT数据集内容：ETT是电力变压器温度（Electric Transformer Temperature）数据集，通常包含电力变压器在不同时间点的温度…...

编程日记 2024/12/31 0:45:38

连锁餐饮行业数据可视化分析方案

引言随着连锁餐饮行业的迅速发展，市场竞争日益激烈。企业需要更加精准地把握运营状况、消费者需求和市场趋势，以制定科学合理的决策，提升竞争力和盈利能力。可视化数据分析可以帮助连锁餐饮企业整合多源数据，通过直观、动态的可…...

编程日记 2024/12/31 0:44:36

Ubuntu 下使用命令行将 U 盘格式化为 ext4、FAT32 和 exFAT 的详细教程

Ubuntu 下使用命令行将 U 盘格式化为 ext4、FAT32 和 exFAT 的详细教程作者：Witheart更新时间：20241228 本教程将详细介绍如何将 U 盘格式化为 ext4、FAT32 和 exFAT 文件系统，同时包括如何安装必要工具（如 exfat-utils&#x…...

编程日记 2024/12/31 0:40:32

多说话人ASR的衡量指标和有效计算工具包

WER (Word Error Rate) 定义：预测的识别语音序列于groundtruth抄本之间的编辑距离除以 ground truth抄本的单词数量编辑距离 （预测的识别语音序列，groundtruth 抄本）/ ground truth抄本的单词数量英文定义：It is g…...

编程日记 2024/12/31 0:39:31

英伟达（NVIDIA）

本文来自智谱清言 ------------------------------ 英伟达（NVIDIA）是一家成立于1993年的美国跨国科技公司，由黄仁勋、克里斯马拉科夫斯基和柯蒂斯普里姆共同创立。公司总部位于加利福尼亚州圣克拉拉市。英伟达最初专注于图形芯片的设计&…...

编程日记 2024/12/31 0:37:29

【环境配置】Jupyter Notebook切换虚拟环境

在Jupyter Notebook中是可以切换虚拟环境的，以下是几种常见的方法： 方法一：使用nb_conda_kernels扩展（适用于Anaconda环境） 安装如果你使用的是Anaconda环境，首先确保你已经安装了 nb_conda 包。如果没…...

编程日记 2024/12/31 0:36:28

嵌入式单片机窗口看门狗控制与实现

窗口看门狗注意：WWDG外设没有独立的时钟源，而是挂载在APB1总线下，APB1总线外设时钟为42MHZ。了解WWDG外设的使用流程，可以参考stm32f4xx_wwdg.c的开头注释，具体流程如下图所示...

编程日记 2024/12/31 0:35:26

NiChart 多模态神经影像（structural MRI，functional MRI，and diffusion MRI）处理和分析工具包安装

NiChart多模态神经影像部署 NiChart 本地安装Git clone 问题personal access token PAT 问题 NiChart 云端注册AWS验证问题 NiChart 是UPenn大学，Christos Davatzikos教授开发的一个多模态MRI影像，structural (sMRI), diffusion (dMRI)， and …...

编程日记 2024/12/31 0:34:22

一：效果展示

二：源代码分享

三：代码分析

1.HTML结构

2.CSS结构

3.JavaScript结构

相关文章：

1.`HTML`结构

2.`CSS`结构

3.`JavaScript`结构