1449 lines
75 KiB
HTML
1449 lines
75 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>单片机学习网站</title>
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
|
||
<style>
|
||
:root {
|
||
--primary-color: #4F46E5;
|
||
--secondary-color: #10B981;
|
||
--background-color: #F3F4F6;
|
||
--card-background: #FFFFFF;
|
||
--text-color: #1F2937;
|
||
--muted-text: #6B7280;
|
||
}
|
||
.dark {
|
||
--primary-color: #6366F1;
|
||
--secondary-color: #34D399;
|
||
--background-color: #111827;
|
||
--card-background: #1F2937;
|
||
--text-color: #F9FAFB;
|
||
--muted-text: #9CA3AF;
|
||
}
|
||
body {
|
||
background-color: var(--background-color);
|
||
color: var(--text-color);
|
||
transition: background-color 0.3s, color 0.3s;
|
||
}
|
||
.card {
|
||
background-color: var(--card-background);
|
||
transition: background-color 0.3s;
|
||
}
|
||
.btn-primary {
|
||
background-color: var(--primary-color);
|
||
color: white;
|
||
transition: background-color 0.3s;
|
||
}
|
||
.btn-primary:hover {
|
||
opacity: 0.9;
|
||
}
|
||
.btn-secondary {
|
||
background-color: var(--secondary-color);
|
||
color: white;
|
||
transition: background-color 0.3s;
|
||
}
|
||
.btn-secondary:hover {
|
||
opacity: 0.9;
|
||
}
|
||
.nav-link {
|
||
position: relative;
|
||
}
|
||
.nav-link::after {
|
||
content: '';
|
||
position: absolute;
|
||
width: 0;
|
||
height: 2px;
|
||
bottom: -2px;
|
||
left: 0;
|
||
background-color: var(--primary-color);
|
||
transition: width 0.3s;
|
||
}
|
||
.nav-link:hover::after, .nav-link.active::after {
|
||
width: 100%;
|
||
}
|
||
.tab-content {
|
||
display: none;
|
||
}
|
||
.tab-content.active {
|
||
display: block;
|
||
}
|
||
.code-block {
|
||
background-color: #1E293B;
|
||
color: #E2E8F0;
|
||
padding: 1rem;
|
||
border-radius: 0.5rem;
|
||
overflow-x: auto;
|
||
font-family: 'Courier New', Courier, monospace;
|
||
}
|
||
.progress-bar {
|
||
height: 8px;
|
||
background-color: #E5E7EB;
|
||
border-radius: 4px;
|
||
overflow: hidden;
|
||
}
|
||
.progress {
|
||
height: 100%;
|
||
background-color: var(--primary-color);
|
||
transition: width 0.3s;
|
||
}
|
||
.quiz-option {
|
||
cursor: pointer;
|
||
transition: background-color 0.2s;
|
||
}
|
||
.quiz-option:hover {
|
||
background-color: #E5E7EB;
|
||
}
|
||
.quiz-option.selected {
|
||
background-color: #DBEAFE;
|
||
border-color: var(--primary-color);
|
||
}
|
||
.quiz-option.correct {
|
||
background-color: #D1FAE5;
|
||
border-color: var(--secondary-color);
|
||
}
|
||
.quiz-option.incorrect {
|
||
background-color: #FEE2E2;
|
||
border-color: #EF4444;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="font-sans">
|
||
<div id="app" class="min-h-screen flex flex-col">
|
||
<!-- 导航栏 -->
|
||
<header class="card shadow-md sticky top-0 z-50">
|
||
<div class="container mx-auto px-4 py-4 flex justify-between items-center">
|
||
<div class="flex items-center space-x-2">
|
||
<i class="fa fa-microchip text-primary-color text-2xl"></i>
|
||
<h1 class="text-2xl font-bold">单片机学习</h1>
|
||
</div>
|
||
<nav class="hidden md:flex items-center space-x-8">
|
||
<a href="#" class="nav-link active" data-tab="home">首页</a>
|
||
<a href="#" class="nav-link" data-tab="tutorials">教程</a>
|
||
<a href="#" class="nav-link" data-tab="interactive">交互式学习</a>
|
||
<a href="#" class="nav-link" data-tab="quiz">测试</a>
|
||
<a href="#" class="nav-link" data-tab="resources">资源</a>
|
||
</nav>
|
||
<div class="flex items-center space-x-4">
|
||
<button id="theme-toggle" class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700">
|
||
<i class="fa fa-sun-o block dark:hidden"></i>
|
||
<i class="fa fa-moon-o hidden dark:block"></i>
|
||
</button>
|
||
<button id="mobile-menu-button" class="md:hidden p-2">
|
||
<i class="fa fa-bars"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<!-- 移动端菜单 -->
|
||
<div id="mobile-menu" class="md:hidden hidden px-4 pb-4">
|
||
<nav class="flex flex-col space-y-4">
|
||
<a href="#" class="nav-link active" data-tab="home">首页</a>
|
||
<a href="#" class="nav-link" data-tab="tutorials">教程</a>
|
||
<a href="#" class="nav-link" data-tab="interactive">交互式学习</a>
|
||
<a href="#" class="nav-link" data-tab="quiz">测试</a>
|
||
<a href="#" class="nav-link" data-tab="resources">资源</a>
|
||
</nav>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- 主内容区 -->
|
||
<main class="flex-grow container mx-auto px-4 py-8">
|
||
<!-- 首页 -->
|
||
<section id="home" class="tab-content active">
|
||
<div class="text-center mb-12">
|
||
<h2 class="text-4xl font-bold mb-4">欢迎来到单片机学习平台</h2>
|
||
<p class="text-xl text-muted-text max-w-3xl mx-auto">
|
||
专为小白设计的交互式学习平台，让你轻松掌握单片机技术。
|
||
</p>
|
||
</div>
|
||
|
||
<div class="grid md:grid-cols-3 gap-8 mb-12">
|
||
<div class="card p-6 rounded-lg shadow-md text-center">
|
||
<div class="inline-flex items-center justify-center p-4 bg-indigo-100 dark:bg-indigo-900 rounded-full mb-4">
|
||
<i class="fa fa-book text-primary-color text-3xl"></i>
|
||
</div>
|
||
<h3 class="text-xl font-semibold mb-2">结构化教程</h3>
|
||
<p class="text-muted-text">从基础到进阶，系统化学习单片机知识。</p>
|
||
</div>
|
||
<div class="card p-6 rounded-lg shadow-md text-center">
|
||
<div class="inline-flex items-center justify-center p-4 bg-green-100 dark:bg-green-900 rounded-full mb-4">
|
||
<i class="fa fa-code text-secondary-color text-3xl"></i>
|
||
</div>
|
||
<h3 class="text-xl font-semibold mb-2">交互式编程</h3>
|
||
<p class="text-muted-text">在线编写和调试代码，即时看到效果。</p>
|
||
</div>
|
||
<div class="card p-6 rounded-lg shadow-md text-center">
|
||
<div class="inline-flex items-center justify-center p-4 bg-blue-100 dark:bg-blue-900 rounded-full mb-4">
|
||
<i class="fa fa-check-square-o text-blue-500 text-3xl"></i>
|
||
</div>
|
||
<h3 class="text-xl font-semibold mb-2">即时测试</h3>
|
||
<p class="text-muted-text">通过测验检验学习成果，巩固知识点。</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card p-8 rounded-lg shadow-lg">
|
||
<h3 class="text-2xl font-bold mb-4">开始你的学习之旅</h3>
|
||
<p class="mb-6">根据你的学习进度选择合适的内容：</p>
|
||
<div class="grid md:grid-cols-2 gap-6">
|
||
<div>
|
||
<h4 class="text-lg font-semibold mb-2">学习进度</h4>
|
||
<div class="space-y-4">
|
||
<div>
|
||
<div class="flex justify-between mb-1">
|
||
<span>基础概念</span>
|
||
<span>0%</span>
|
||
</div>
|
||
<div class="progress-bar">
|
||
<div class="progress" style="width: 0%"></div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div class="flex justify-between mb-1">
|
||
<span>GPIO编程</span>
|
||
<span>0%</span>
|
||
</div>
|
||
<div class="progress-bar">
|
||
<div class="progress" style="width: 0%"></div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div class="flex justify-between mb-1">
|
||
<span>中断系统</span>
|
||
<span>0%</span>
|
||
</div>
|
||
<div class="progress-bar">
|
||
<div class="progress" style="width: 0%"></div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div class="flex justify-between mb-1">
|
||
<span>定时器</span>
|
||
<span>0%</span>
|
||
</div>
|
||
<div class="progress-bar">
|
||
<div class="progress" style="width: 0%"></div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div class="flex justify-between mb-1">
|
||
<span>串口通信</span>
|
||
<span>0%</span>
|
||
</div>
|
||
<div class="progress-bar">
|
||
<div class="progress" style="width: 0%"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<h4 class="text-lg font-semibold mb-2">推荐学习</h4>
|
||
<ul class="space-y-2">
|
||
<li>
|
||
<a href="#" class="flex items-center p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700" data-tab-link="tutorials" data-tutorial="basic">
|
||
<i class="fa fa-play-circle mr-2 text-primary-color"></i>
|
||
<span>单片机基础概念</span>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="#" class="flex items-center p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700" data-tab-link="interactive" data-interactive="gpio">
|
||
<i class="fa fa-play-circle mr-2 text-secondary-color"></i>
|
||
<span>GPIO控制实验</span>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="#" class="flex items-center p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700" data-tab-link="quiz" data-quiz="basic">
|
||
<i class="fa fa-play-circle mr-2 text-blue-500"></i>
|
||
<span>基础概念测试</span>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 教程 -->
|
||
<section id="tutorials" class="tab-content">
|
||
<h2 class="text-3xl font-bold mb-6">单片机教程</h2>
|
||
|
||
<div class="grid md:grid-cols-4 gap-8">
|
||
<!-- 教程目录 -->
|
||
<div class="md:col-span-1">
|
||
<div class="card p-4 rounded-lg shadow-md sticky top-24">
|
||
<h3 class="text-xl font-semibold mb-4">教程目录</h3>
|
||
<ul class="space-y-2">
|
||
<li>
|
||
<a href="#" class="tutorial-link flex items-center p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700 active" data-tutorial="basic">
|
||
<i class="fa fa-book mr-2"></i>
|
||
<span>1. 基础概念</span>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="#" class="tutorial-link flex items-center p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700" data-tutorial="gpio">
|
||
<i class="fa fa-book mr-2"></i>
|
||
<span>2. GPIO编程</span>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="#" class="tutorial-link flex items-center p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700" data-tutorial="interrupt">
|
||
<i class="fa fa-book mr-2"></i>
|
||
<span>3. 中断系统</span>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="#" class="tutorial-link flex items-center p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700" data-tutorial="timer">
|
||
<i class="fa fa-book mr-2"></i>
|
||
<span>4. 定时器</span>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="#" class="tutorial-link flex items-center p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700" data-tutorial="uart">
|
||
<i class="fa fa-book mr-2"></i>
|
||
<span>5. 串口通信</span>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 教程内容 -->
|
||
<div class="md:col-span-3">
|
||
<div class="card p-6 rounded-lg shadow-md">
|
||
<!-- 基础概念 -->
|
||
<div id="basic-tutorial" class="tutorial-content active">
|
||
<h3 class="text-2xl font-bold mb-4">单片机基础概念</h3>
|
||
|
||
<div class="mb-6">
|
||
<h4 class="text-xl font-semibold mb-2">什么是单片机？</h4>
|
||
<p class="mb-4">
|
||
单片机是一种集成了中央处理器（CPU）、存储器（RAM、ROM）、
|
||
输入/输出接口（I/O）和定时器/计数器等功能于一体的微型计算机芯片。
|
||
</p>
|
||
<p>
|
||
与通用计算机不同，单片机通常用于控制特定的电子设备，如家电、工业设备、医疗设备等。
|
||
它体积小、功耗低、价格便宜，是嵌入式系统的核心组件。
|
||
</p>
|
||
</div>
|
||
|
||
<div class="mb-6">
|
||
<h4 class="text-xl font-semibold mb-2">单片机的组成</h4>
|
||
<ul class="list-disc pl-6 space-y-2">
|
||
<li><strong>中央处理器（CPU）</strong>：负责执行指令和处理数据。</li>
|
||
<li><strong>程序存储器（ROM/Flash）</strong>：存储程序代码。</li>
|
||
<li><strong>数据存储器（RAM）</strong>：存储临时数据。</li>
|
||
<li><strong>输入/输出端口（I/O Ports）</strong>：与外部设备通信的接口。</li>
|
||
<li><strong>定时器/计数器</strong>：用于定时和计数功能。</li>
|
||
<li><strong>串行通信接口（UART、SPI、I2C等）</strong>：用于与其他设备通信。</li>
|
||
<li><strong>模数转换器（ADC）</strong>：将模拟信号转换为数字信号。</li>
|
||
<li><strong>数模转换器（DAC）</strong>：将数字信号转换为模拟信号。</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="mb-6">
|
||
<h4 class="text-xl font-semibold mb-2">常见的单片机系列</h4>
|
||
<div class="grid md:grid-cols-2 gap-4">
|
||
<div class="p-4 border rounded-lg">
|
||
<h5 class="font-semibold mb-2">51系列</h5>
|
||
<p>经典的8位单片机，如AT89C51，教学中常用。</p>
|
||
</div>
|
||
<div class="p-4 border rounded-lg">
|
||
<h5 class="font-semibold mb-2">STM32系列</h5>
|
||
<p>基于ARM Cortex-M内核的32位高性能单片机。</p>
|
||
</div>
|
||
<div class="p-4 border rounded-lg">
|
||
<h5 class="font-semibold mb-2">Arduino</h5>
|
||
<p>基于AVR或ARM的开源电子原型平台，适合初学者。</p>
|
||
</div>
|
||
<div class="p-4 border rounded-lg">
|
||
<h5 class="font-semibold mb-2">PIC系列</h5>
|
||
<p>Microchip公司的单片机，广泛应用于工业控制。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mb-6">
|
||
<h4 class="text-xl font-semibold mb-2">单片机的应用领域</h4>
|
||
<ul class="list-disc pl-6 space-y-2">
|
||
<li>家用电器：空调、洗衣机、微波炉等</li>
|
||
<li>工业控制：PLC、变频器、传感器等</li>
|
||
<li>汽车电子：发动机控制、仪表盘、ABS等</li>
|
||
<li>医疗设备：血糖仪、血压计、监护仪等</li>
|
||
<li>智能终端：手机、平板电脑、可穿戴设备等</li>
|
||
<li>物联网设备：智能插座、温湿度传感器、摄像头等</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="flex justify-between mt-8">
|
||
<button class="btn-secondary px-4 py-2 rounded-lg flex items-center opacity-50 cursor-not-allowed">
|
||
<i class="fa fa-chevron-left mr-2"></i>
|
||
上一课
|
||
</button>
|
||
<button class="btn-primary px-4 py-2 rounded-lg flex items-center tutorial-nav" data-target="gpio">
|
||
下一课
|
||
<i class="fa fa-chevron-right ml-2"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- GPIO编程 -->
|
||
<div id="gpio-tutorial" class="tutorial-content hidden">
|
||
<h3 class="text-2xl font-bold mb-4">GPIO编程</h3>
|
||
|
||
<div class="mb-6">
|
||
<h4 class="text-xl font-semibold mb-2">什么是GPIO？</h4>
|
||
<p class="mb-4">
|
||
GPIO（通用输入/输出端口）是单片机与外部设备交互的最基本方式。
|
||
每个GPIO引脚可以配置为输入或输出模式。
|
||
</p>
|
||
</div>
|
||
|
||
<div class="mb-6">
|
||
<h4 class="text-xl font-semibold mb-2">GPIO的基本操作</h4>
|
||
<h5 class="font-semibold mb-2">1. 引脚配置</h5>
|
||
<p class="mb-4">在使用GPIO之前，需要先配置引脚的工作模式（输入/输出）。</p>
|
||
|
||
<div class="code-block mb-4">
|
||
<pre>// 配置PA5为输出模式
|
||
GPIO_InitTypeDef GPIO_InitStructure;
|
||
RCC_APB2PeriphClockCmd(RCC_APB2Periph_GPIOA, ENABLE); // 使能GPIOA时钟
|
||
|
||
GPIO_InitStructure.GPIO_Pin = GPIO_Pin_5; // 选择PA5引脚
|
||
GPIO_InitStructure.GPIO_Mode = GPIO_Mode_Out_PP; // 推挽输出模式
|
||
GPIO_InitStructure.GPIO_Speed = GPIO_Speed_50MHz; // 引脚速度为50MHz
|
||
GPIO_Init(GPIOA, &GPIO_InitStructure); // 初始化GPIOA</pre>
|
||
</div>
|
||
|
||
<h5 class="font-semibold mb-2">2. 输出操作</h5>
|
||
<p class="mb-4">设置GPIO引脚的输出电平（高电平或低电平）。</p>
|
||
|
||
<div class="code-block mb-4">
|
||
<pre>// 设置PA5为高电平
|
||
GPIO_SetBits(GPIOA, GPIO_Pin_5);
|
||
|
||
// 设置PA5为低电平
|
||
GPIO_ResetBits(GPIOA, GPIO_Pin_5);
|
||
|
||
// 翻转PA5的电平
|
||
GPIO_WriteBit(GPIOA, GPIO_Pin_5, (BitAction)(1 - GPIO_ReadOutputDataBit(GPIOA, GPIO_Pin_5)));</pre>
|
||
</div>
|
||
|
||
<h5 class="font-semibold mb-2">3. 输入操作</h5>
|
||
<p class="mb-4">读取GPIO引脚的输入电平。</p>
|
||
|
||
<div class="code-block mb-4">
|
||
<pre>// 读取PA0的输入电平
|
||
uint8_t pin_state = GPIO_ReadInputDataBit(GPIOA, GPIO_Pin_0);
|
||
|
||
if(pin_state == Bit_SET) {
|
||
// 引脚为高电平
|
||
} else {
|
||
// 引脚为低电平
|
||
}</pre>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mb-6">
|
||
<h4 class="text-xl font-semibold mb-2">GPIO的工作模式</h4>
|
||
<ul class="list-disc pl-6 space-y-2">
|
||
<li><strong>推挽输出（Push-Pull）</strong>：可以输出高电平和低电平，驱动能力强。</li>
|
||
<li><strong>开漏输出（Open-Drain）</strong>：只能输出低电平，高电平需要外部上拉电阻。</li>
|
||
<li><strong>浮空输入（Floating Input）</strong>：引脚电平不确定，易受干扰。</li>
|
||
<li><strong>上拉输入（Pull-Up Input）</strong>：默认电平为高电平，有外部上拉电阻。</li>
|
||
<li><strong>下拉输入（Pull-Down Input）</strong>：默认电平为低电平，有外部下拉电阻。</li>
|
||
<li><strong>模拟输入（Analog Input）</strong>：用于ADC采样。</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="flex justify-between mt-8">
|
||
<button class="btn-primary px-4 py-2 rounded-lg flex items-center tutorial-nav" data-target="basic">
|
||
<i class="fa fa-chevron-left mr-2"></i>
|
||
上一课
|
||
</button>
|
||
<button class="btn-primary px-4 py-2 rounded-lg flex items-center tutorial-nav" data-target="interrupt">
|
||
下一课
|
||
<i class="fa fa-chevron-right ml-2"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 中断系统 -->
|
||
<div id="interrupt-tutorial" class="tutorial-content hidden">
|
||
<h3 class="text-2xl font-bold mb-4">中断系统</h3>
|
||
<!-- 中断系统的内容 -->
|
||
<p>中断系统的详细内容将在这里展示...</p>
|
||
<div class="flex justify-between mt-8">
|
||
<button class="btn-primary px-4 py-2 rounded-lg flex items-center tutorial-nav" data-target="gpio">
|
||
<i class="fa fa-chevron-left mr-2"></i>
|
||
上一课
|
||
</button>
|
||
<button class="btn-primary px-4 py-2 rounded-lg flex items-center tutorial-nav" data-target="timer">
|
||
下一课
|
||
<i class="fa fa-chevron-right ml-2"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 定时器 -->
|
||
<div id="timer-tutorial" class="tutorial-content hidden">
|
||
<h3 class="text-2xl font-bold mb-4">定时器</h3>
|
||
<!-- 定时器的内容 -->
|
||
<p>定时器的详细内容将在这里展示...</p>
|
||
<div class="flex justify-between mt-8">
|
||
<button class="btn-primary px-4 py-2 rounded-lg flex items-center tutorial-nav" data-target="interrupt">
|
||
<i class="fa fa-chevron-left mr-2"></i>
|
||
上一课
|
||
</button>
|
||
<button class="btn-primary px-4 py-2 rounded-lg flex items-center tutorial-nav" data-target="uart">
|
||
下一课
|
||
<i class="fa fa-chevron-right ml-2"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 串口通信 -->
|
||
<div id="uart-tutorial" class="tutorial-content hidden">
|
||
<h3 class="text-2xl font-bold mb-4">串口通信</h3>
|
||
<!-- 串口通信的内容 -->
|
||
<p>串口通信的详细内容将在这里展示...</p>
|
||
<div class="flex justify-between mt-8">
|
||
<button class="btn-primary px-4 py-2 rounded-lg flex items-center tutorial-nav" data-target="timer">
|
||
<i class="fa fa-chevron-left mr-2"></i>
|
||
上一课
|
||
</button>
|
||
<button class="btn-secondary px-4 py-2 rounded-lg flex items-center opacity-50 cursor-not-allowed">
|
||
下一课
|
||
<i class="fa fa-chevron-right ml-2"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 交互式学习 -->
|
||
<section id="interactive" class="tab-content">
|
||
<h2 class="text-3xl font-bold mb-6">交互式学习</h2>
|
||
|
||
<div class="grid md:grid-cols-4 gap-8">
|
||
<!-- 实验列表 -->
|
||
<div class="md:col-span-1">
|
||
<div class="card p-4 rounded-lg shadow-md sticky top-24">
|
||
<h3 class="text-xl font-semibold mb-4">实验列表</h3>
|
||
<ul class="space-y-2">
|
||
<li>
|
||
<a href="#" class="experiment-link flex items-center p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700 active" data-experiment="gpio">
|
||
<i class="fa fa-flask mr-2"></i>
|
||
<span>1. GPIO控制实验</span>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="#" class="experiment-link flex items-center p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700" data-experiment="led">
|
||
<i class="fa fa-flask mr-2"></i>
|
||
<span>2. LED闪烁实验</span>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="#" class="experiment-link flex items-center p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700" data-experiment="button">
|
||
<i class="fa fa-flask mr-2"></i>
|
||
<span>3. 按键输入实验</span>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="#" class="experiment-link flex items-center p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700" data-experiment="pwm">
|
||
<i class="fa fa-flask mr-2"></i>
|
||
<span>4. PWM调光实验</span>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 实验内容 -->
|
||
<div class="md:col-span-3">
|
||
<div class="card p-6 rounded-lg shadow-md">
|
||
<!-- GPIO控制实验 -->
|
||
<div id="gpio-experiment" class="experiment-content active">
|
||
<h3 class="text-2xl font-bold mb-4">GPIO控制实验</h3>
|
||
|
||
<div class="mb-6">
|
||
<h4 class="text-xl font-semibold mb-2">实验目标</h4>
|
||
<p>通过本实验，你将学习如何配置和控制单片机的GPIO引脚，实现LED的点亮和熄灭。</p>
|
||
</div>
|
||
|
||
<div class="mb-6">
|
||
<h4 class="text-xl font-semibold mb-2">硬件连接</h4>
|
||
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg mb-4">
|
||
<p>LED的阳极（长脚）连接到PA5引脚，阴极（短脚）通过220Ω电阻连接到GND。</p>
|
||
</div>
|
||
<div class="flex justify-center">
|
||
<img src="https://img.freepik.com/free-vector/electronics-circuit-diagram-with-microcontroller-led-resistor_1017-37046.jpg" alt="LED连接图" class="max-w-full h-auto border rounded-lg">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mb-6">
|
||
<h4 class="text-xl font-semibold mb-2">代码编写</h4>
|
||
<div class="mb-4">
|
||
<label for="code-editor" class="block mb-2">在下面的代码编辑器中编写程序：</label>
|
||
<textarea id="code-editor" class="w-full h-64 p-4 border rounded-lg font-mono text-sm" placeholder="// 在这里编写你的代码...">
|
||
#include "stm32f10x.h"
|
||
|
||
void GPIO_Configuration(void)
|
||
{
|
||
GPIO_InitTypeDef GPIO_InitStructure;
|
||
|
||
// 使能GPIOA时钟
|
||
RCC_APB2PeriphClockCmd(RCC_APB2Periph_GPIOA, ENABLE);
|
||
|
||
// 配置PA5为推挽输出
|
||
GPIO_InitStructure.GPIO_Pin = GPIO_Pin_5;
|
||
GPIO_InitStructure.GPIO_Mode = GPIO_Mode_Out_PP;
|
||
GPIO_InitStructure.GPIO_Speed = GPIO_Speed_50MHz;
|
||
GPIO_Init(GPIOA, &GPIO_InitStructure);
|
||
}
|
||
|
||
void Delay(uint32_t nCount)
|
||
{
|
||
for(; nCount != 0; nCount--);
|
||
}
|
||
|
||
int main(void)
|
||
{
|
||
// 初始化GPIO
|
||
GPIO_Configuration();
|
||
|
||
while(1)
|
||
{
|
||
// 点亮LED
|
||
GPIO_SetBits(GPIOA, GPIO_Pin_5);
|
||
// 延时
|
||
Delay(0xFFFFF);
|
||
// 熄灭LED
|
||
GPIO_ResetBits(GPIOA, GPIO_Pin_5);
|
||
// 延时
|
||
Delay(0xFFFFF);
|
||
}
|
||
}
|
||
</textarea>
|
||
</div>
|
||
<div class="flex space-x-4">
|
||
<button id="compile-btn" class="btn-primary px-4 py-2 rounded-lg flex items-center">
|
||
<i class="fa fa-terminal mr-2"></i>
|
||
编译
|
||
</button>
|
||
<button id="run-btn" class="btn-secondary px-4 py-2 rounded-lg flex items-center">
|
||
<i class="fa fa-play mr-2"></i>
|
||
运行
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mb-6">
|
||
<h4 class="text-xl font-semibold mb-2">虚拟仿真</h4>
|
||
<div class="bg-gray-800 p-4 rounded-lg">
|
||
<div id="simulation-area" class="flex justify-center items-center h-64">
|
||
<div class="relative">
|
||
<div class="w-32 h-32 bg-gray-700 rounded-lg flex items-center justify-center">
|
||
<div id="virtual-led" class="w-16 h-16 bg-gray-600 rounded-full border-4 border-gray-500"></div>
|
||
</div>
|
||
<div class="absolute bottom-0 left-0 right-0 flex justify-center">
|
||
<button id="toggle-led" class="btn-primary px-4 py-2 rounded-lg mt-4">
|
||
切换LED状态
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mb-6">
|
||
<h4 class="text-xl font-semibold mb-2">实验说明</h4>
|
||
<div class="bg-blue-50 dark:bg-blue-900/30 p-4 rounded-lg">
|
||
<p class="mb-2"><strong>代码解析：</strong></p>
|
||
<ul class="list-disc pl-6 space-y-1">
|
||
<li><code>GPIO_Configuration()</code> 函数用于初始化GPIO引脚。</li>
|
||
<li><code>Delay()</code> 函数用于产生延时。</li>
|
||
<li>在 <code>main()</code> 函数中，我们不断地切换LED的状态，实现闪烁效果。</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- LED闪烁实验 -->
|
||
<div id="led-experiment" class="experiment-content hidden">
|
||
<h3 class="text-2xl font-bold mb-4">LED闪烁实验</h3>
|
||
<!-- LED闪烁实验的内容 -->
|
||
<p>LED闪烁实验的详细内容将在这里展示...</p>
|
||
</div>
|
||
|
||
<!-- 按键输入实验 -->
|
||
<div id="button-experiment" class="experiment-content hidden">
|
||
<h3 class="text-2xl font-bold mb-4">按键输入实验</h3>
|
||
<!-- 按键输入实验的内容 -->
|
||
<p>按键输入实验的详细内容将在这里展示...</p>
|
||
</div>
|
||
|
||
<!-- PWM调光实验 -->
|
||
<div id="pwm-experiment" class="experiment-content hidden">
|
||
<h3 class="text-2xl font-bold mb-4">PWM调光实验</h3>
|
||
<!-- PWM调光实验的内容 -->
|
||
<p>PWM调光实验的详细内容将在这里展示...</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 测试 -->
|
||
<section id="quiz" class="tab-content">
|
||
<h2 class="text-3xl font-bold mb-6">知识测试</h2>
|
||
|
||
<div class="grid md:grid-cols-4 gap-8">
|
||
<!-- 测试列表 -->
|
||
<div class="md:col-span-1">
|
||
<div class="card p-4 rounded-lg shadow-md sticky top-24">
|
||
<h3 class="text-xl font-semibold mb-4">测试列表</h3>
|
||
<ul class="space-y-2">
|
||
<li>
|
||
<a href="#" class="quiz-link flex items-center p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700 active" data-quiz="basic">
|
||
<i class="fa fa-check-square-o mr-2"></i>
|
||
<span>1. 基础概念测试</span>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="#" class="quiz-link flex items-center p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700" data-quiz="gpio">
|
||
<i class="fa fa-check-square-o mr-2"></i>
|
||
<span>2. GPIO测试</span>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="#" class="quiz-link flex items-center p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700" data-quiz="interrupt">
|
||
<i class="fa fa-check-square-o mr-2"></i>
|
||
<span>3. 中断系统测试</span>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="#" class="quiz-link flex items-center p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700" data-quiz="comprehensive">
|
||
<i class="fa fa-check-square-o mr-2"></i>
|
||
<span>4. 综合测试</span>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 测试内容 -->
|
||
<div class="md:col-span-3">
|
||
<div class="card p-6 rounded-lg shadow-md">
|
||
<!-- 基础概念测试 -->
|
||
<div id="basic-quiz" class="quiz-content active">
|
||
<h3 class="text-2xl font-bold mb-4">基础概念测试</h3>
|
||
|
||
<div id="quiz-container">
|
||
<div id="quiz-progress" class="mb-6">
|
||
<div class="flex justify-between mb-1">
|
||
<span>进度：<span id="current-question">1</span>/<span id="total-questions">5</span></span>
|
||
<span>得分：<span id="score">0</span></span>
|
||
</div>
|
||
<div class="progress-bar">
|
||
<div id="quiz-progress-bar" class="progress" style="width: 20%"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="question-container" class="mb-6">
|
||
<h4 id="question-text" class="text-xl font-semibold mb-4">1. 单片机是一种集成了哪些功能的微型计算机芯片？</h4>
|
||
<div id="options-container" class="space-y-3">
|
||
<div class="quiz-option p-3 border rounded-lg" data-option="A">
|
||
A. 只集成了CPU
|
||
</div>
|
||
<div class="quiz-option p-3 border rounded-lg" data-option="B">
|
||
B. 集成了CPU、存储器和I/O接口
|
||
</div>
|
||
<div class="quiz-option p-3 border rounded-lg" data-option="C">
|
||
C. 只集成了存储器
|
||
</div>
|
||
<div class="quiz-option p-3 border rounded-lg" data-option="D">
|
||
D. 集成了CPU和显示器
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="explanation-container" class="hidden mb-6 p-4 rounded-lg bg-blue-50 dark:bg-blue-900/30">
|
||
<h4 class="font-semibold mb-2">答案解析：</h4>
|
||
<p id="explanation-text"></p>
|
||
</div>
|
||
|
||
<div class="flex justify-between">
|
||
<button id="prev-question" class="btn-primary px-4 py-2 rounded-lg flex items-center opacity-50 cursor-not-allowed">
|
||
<i class="fa fa-chevron-left mr-2"></i>
|
||
上一题
|
||
</button>
|
||
<button id="next-question" class="btn-secondary px-4 py-2 rounded-lg flex items-center">
|
||
下一题
|
||
<i class="fa fa-chevron-right ml-2"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="quiz-result" class="hidden text-center">
|
||
<h3 class="text-2xl font-bold mb-4">测试完成！</h3>
|
||
<p class="text-xl mb-2">你的得分：<span id="final-score">0</span>/<span id="max-score">5</span></p>
|
||
<p id="result-message" class="mb-6"></p>
|
||
<button id="restart-quiz" class="btn-primary px-6 py-3 rounded-lg text-lg">
|
||
重新测试
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- GPIO测试 -->
|
||
<div id="gpio-quiz" class="quiz-content hidden">
|
||
<h3 class="text-2xl font-bold mb-4">GPIO测试</h3>
|
||
<!-- GPIO测试的内容 -->
|
||
<p>GPIO测试的详细内容将在这里展示...</p>
|
||
</div>
|
||
|
||
<!-- 中断系统测试 -->
|
||
<div id="interrupt-quiz" class="quiz-content hidden">
|
||
<h3 class="text-2xl font-bold mb-4">中断系统测试</h3>
|
||
<!-- 中断系统测试的内容 -->
|
||
<p>中断系统测试的详细内容将在这里展示...</p>
|
||
</div>
|
||
|
||
<!-- 综合测试 -->
|
||
<div id="comprehensive-quiz" class="quiz-content hidden">
|
||
<h3 class="text-2xl font-bold mb-4">综合测试</h3>
|
||
<!-- 综合测试的内容 -->
|
||
<p>综合测试的详细内容将在这里展示...</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 资源 -->
|
||
<section id="resources" class="tab-content">
|
||
<h2 class="text-3xl font-bold mb-6">学习资源</h2>
|
||
|
||
<div class="grid md:grid-cols-2 gap-8">
|
||
<!-- 推荐书籍 -->
|
||
<div class="card p-6 rounded-lg shadow-md">
|
||
<h3 class="text-2xl font-semibold mb-4">推荐书籍</h3>
|
||
<ul class="space-y-4">
|
||
<li class="flex items-start">
|
||
<img src="https://img.freepik.com/free-vector/hand-drawn-book-cover_23-2149485482.jpg" alt="书籍封面" class="w-16 h-24 object-cover rounded mr-4">
|
||
<div>
|
||
<h4 class="font-semibold">《单片机原理与应用》</h4>
|
||
<p class="text-muted-text">作者：张毅刚</p>
|
||
<p class="text-sm mt-1">本书系统地介绍了单片机的基本原理和应用技术，是一本很好的入门教材。</p>
|
||
</div>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<img src="https://img.freepik.com/free-vector/open-book-with-magnifier-glass-isolated_23-2148887399.jpg" alt="书籍封面" class="w-16 h-24 object-cover rounded mr-4">
|
||
<div>
|
||
<h4 class="font-semibold">《STM32F103开发指南》</h4>
|
||
<p class="text-muted-text">作者：原子哥</p>
|
||
<p class="text-sm mt-1">本书详细介绍了STM32F103系列单片机的开发方法和实例。</p>
|
||
</div>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<img src="https://img.freepik.com/free-vector/book-with-light-bulb-icon-education-concept_24877-39316.jpg" alt="书籍封面" class="w-16 h-24 object-cover rounded mr-4">
|
||
<div>
|
||
<h4 class="font-semibold">《Arduino实战》</h4>
|
||
<p class="text-muted-text">作者：Massimo Banzi</p>
|
||
<p class="text-sm mt-1">本书通过实例介绍了Arduino的使用方法，适合初学者。</p>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- 在线资源 -->
|
||
<div class="card p-6 rounded-lg shadow-md">
|
||
<h3 class="text-2xl font-semibold mb-4">在线资源</h3>
|
||
<ul class="space-y-4">
|
||
<li class="flex items-center">
|
||
<i class="fa fa-link mr-3 text-primary-color"></i>
|
||
<div>
|
||
<h4 class="font-semibold">STM32官方网站</h4>
|
||
<a href="https://www.st.com/en/microcontrollers-microprocessors/stm32-32-bit-arm-cortex-mcus.html" target="_blank" class="text-primary-color hover:underline">https://www.st.com/en/microcontrollers-microprocessors/stm32-32-bit-arm-cortex-mcus.html</a>
|
||
</div>
|
||
</li>
|
||
<li class="flex items-center">
|
||
<i class="fa fa-link mr-3 text-primary-color"></i>
|
||
<div>
|
||
<h4 class="font-semibold">Arduino官网</h4>
|
||
<a href="https://www.arduino.cc/" target="_blank" class="text-primary-color hover:underline">https://www.arduino.cc/</a>
|
||
</div>
|
||
</li>
|
||
<li class="flex items-center">
|
||
<i class="fa fa-link mr-3 text-primary-color"></i>
|
||
<div>
|
||
<h4 class="font-semibold">51单片机学习网</h4>
|
||
<a href="http://www.51hei.com/" target="_blank" class="text-primary-color hover:underline">http://www.51hei.com/</a>
|
||
</div>
|
||
</li>
|
||
<li class="flex items-center">
|
||
<i class="fa fa-play-circle mr-3 text-red-500"></i>
|
||
<div>
|
||
<h4 class="font-semibold">B站单片机教程</h4>
|
||
<a href="https://www.bilibili.com/" target="_blank" class="text-primary-color hover:underline">https://www.bilibili.com/</a>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- 开发工具 -->
|
||
<div class="card p-6 rounded-lg shadow-md">
|
||
<h3 class="text-2xl font-semibold mb-4">开发工具</h3>
|
||
<ul class="space-y-4">
|
||
<li class="flex items-center">
|
||
<i class="fa fa-code mr-3 text-secondary-color"></i>
|
||
<div>
|
||
<h4 class="font-semibold">Keil uVision</h4>
|
||
<p class="text-muted-text">用于ARM Cortex-M系列单片机的集成开发环境。</p>
|
||
</div>
|
||
</li>
|
||
<li class="flex items-center">
|
||
<i class="fa fa-code mr-3 text-secondary-color"></i>
|
||
<div>
|
||
<h4 class="font-semibold">Arduino IDE</h4>
|
||
<p class="text-muted-text">Arduino开发的官方集成开发环境，简单易用。</p>
|
||
</div>
|
||
</li>
|
||
<li class="flex items-center">
|
||
<i class="fa fa-code mr-3 text-secondary-color"></i>
|
||
<div>
|
||
<h4 class="font-semibold">STM32CubeIDE</h4>
|
||
<p class="text-muted-text">ST官方推出的STM32开发环境，基于Eclipse。</p>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- 常见问题 -->
|
||
<div class="card p-6 rounded-lg shadow-md">
|
||
<h3 class="text-2xl font-semibold mb-4">常见问题</h3>
|
||
<div class="space-y-4">
|
||
<div>
|
||
<h4 class="font-semibold cursor-pointer flex items-center faq-question">
|
||
<i class="fa fa-chevron-down mr-2 transition-transform"></i>
|
||
如何选择适合自己的单片机？
|
||
</h4>
|
||
<div class="faq-answer hidden mt-2 pl-6">
|
||
<p>选择单片机需要考虑以下因素：</p>
|
||
<ul class="list-disc pl-6 mt-1">
|
||
<li>性能需求：根据你的项目需求选择合适的CPU性能。</li>
|
||
<li>资源需求：考虑需要的I/O口数量、存储空间等。</li>
|
||
<li>开发难度：初学者可以选择Arduino等入门级平台。</li>
|
||
<li>成本：根据预算选择合适的芯片。</li>
|
||
<li>生态系统：考虑开发工具、资料和社区支持等。</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<h4 class="font-semibold cursor-pointer flex items-center faq-question">
|
||
<i class="fa fa-chevron-down mr-2 transition-transform"></i>
|
||
学习单片机需要哪些基础知识？
|
||
</h4>
|
||
<div class="faq-answer hidden mt-2 pl-6">
|
||
<p>学习单片机需要掌握以下基础知识：</p>
|
||
<ul class="list-disc pl-6 mt-1">
|
||
<li>数字电路基础：了解二进制、逻辑门等概念。</li>
|
||
<li>C语言编程：这是单片机开发最常用的语言。</li>
|
||
<li>计算机组成原理：了解CPU、存储器、总线等概念。</li>
|
||
<li>模拟电路基础：了解电阻、电容、二极管等元件的特性。</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<h4 class="font-semibold cursor-pointer flex items-center faq-question">
|
||
<i class="fa fa-chevron-down mr-2 transition-transform"></i>
|
||
如何调试单片机程序？
|
||
</h4>
|
||
<div class="faq-answer hidden mt-2 pl-6">
|
||
<p>调试单片机程序的方法有：</p>
|
||
<ul class="list-disc pl-6 mt-1">
|
||
<li>使用仿真器：可以单步执行、查看变量。</li>
|
||
<li>串口调试：通过串口打印调试信息。</li>
|
||
<li>LED指示：通过LED的闪烁来指示程序的运行状态。</li>
|
||
<li>逻辑分析仪：用于分析数字信号的时序。</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<!-- 页脚 -->
|
||
<footer class="card shadow-inner mt-auto">
|
||
<div class="container mx-auto px-4 py-6">
|
||
<div class="flex flex-col md:flex-row justify-between items-center">
|
||
<div class="mb-4 md:mb-0">
|
||
<p>© 2025 单片机学习网站. All Rights Reserved.</p>
|
||
</div>
|
||
<div class="flex space-x-4">
|
||
<a href="#" class="hover:text-primary-color">关于我们</a>
|
||
<a href="#" class="hover:text-primary-color">联系方式</a>
|
||
<a href="#" class="hover:text-primary-color">隐私政策</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
</div>
|
||
|
||
<script>
|
||
// 主题切换
|
||
const themeToggle = document.getElementById('theme-toggle');
|
||
const html = document.documentElement;
|
||
|
||
// 检查本地存储中的主题偏好
|
||
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
|
||
html.classList.add('dark');
|
||
} else {
|
||
html.classList.remove('dark');
|
||
}
|
||
|
||
themeToggle.addEventListener('click', () => {
|
||
html.classList.toggle('dark');
|
||
localStorage.theme = html.classList.contains('dark') ? 'dark' : 'light';
|
||
});
|
||
|
||
// 移动端菜单
|
||
const mobileMenuButton = document.getElementById('mobile-menu-button');
|
||
const mobileMenu = document.getElementById('mobile-menu');
|
||
|
||
mobileMenuButton.addEventListener('click', () => {
|
||
mobileMenu.classList.toggle('hidden');
|
||
});
|
||
|
||
// 标签页切换
|
||
const navLinks = document.querySelectorAll('.nav-link');
|
||
const tabContents = document.querySelectorAll('.tab-content');
|
||
|
||
function switchTab(tabId) {
|
||
// 更新导航链接状态
|
||
navLinks.forEach(link => {
|
||
if (link.dataset.tab === tabId) {
|
||
link.classList.add('active');
|
||
} else {
|
||
link.classList.remove('active');
|
||
}
|
||
});
|
||
|
||
// 更新标签页内容
|
||
tabContents.forEach(content => {
|
||
if (content.id === tabId) {
|
||
content.classList.add('active');
|
||
} else {
|
||
content.classList.remove('active');
|
||
}
|
||
});
|
||
|
||
// 关闭移动端菜单
|
||
mobileMenu.classList.add('hidden');
|
||
}
|
||
|
||
navLinks.forEach(link => {
|
||
link.addEventListener('click', (e) => {
|
||
e.preventDefault();
|
||
switchTab(link.dataset.tab);
|
||
});
|
||
});
|
||
|
||
// 教程内容切换
|
||
const tutorialLinks = document.querySelectorAll('.tutorial-link');
|
||
const tutorialContents = document.querySelectorAll('.tutorial-content');
|
||
|
||
function switchTutorial(tutorialId) {
|
||
// 更新教程链接状态
|
||
tutorialLinks.forEach(link => {
|
||
if (link.dataset.tutorial === tutorialId) {
|
||
link.classList.add('active');
|
||
} else {
|
||
link.classList.remove('active');
|
||
}
|
||
});
|
||
|
||
// 更新教程内容
|
||
tutorialContents.forEach(content => {
|
||
if (content.id === tutorialId + '-tutorial') {
|
||
content.classList.add('active');
|
||
} else {
|
||
content.classList.remove('active');
|
||
}
|
||
});
|
||
}
|
||
|
||
tutorialLinks.forEach(link => {
|
||
link.addEventListener('click', (e) => {
|
||
e.preventDefault();
|
||
switchTutorial(link.dataset.tutorial);
|
||
});
|
||
});
|
||
|
||
// 教程导航按钮
|
||
const tutorialNavButtons = document.querySelectorAll('.tutorial-nav');
|
||
tutorialNavButtons.forEach(button => {
|
||
button.addEventListener('click', () => {
|
||
if (!button.classList.contains('cursor-not-allowed')) {
|
||
switchTutorial(button.dataset.target);
|
||
}
|
||
});
|
||
});
|
||
|
||
// 实验内容切换
|
||
const experimentLinks = document.querySelectorAll('.experiment-link');
|
||
const experimentContents = document.querySelectorAll('.experiment-content');
|
||
|
||
function switchExperiment(experimentId) {
|
||
// 更新实验链接状态
|
||
experimentLinks.forEach(link => {
|
||
if (link.dataset.experiment === experimentId) {
|
||
link.classList.add('active');
|
||
} else {
|
||
link.classList.remove('active');
|
||
}
|
||
});
|
||
|
||
// 更新实验内容
|
||
experimentContents.forEach(content => {
|
||
if (content.id === experimentId + '-experiment') {
|
||
content.classList.add('active');
|
||
} else {
|
||
content.classList.remove('active');
|
||
}
|
||
});
|
||
}
|
||
|
||
experimentLinks.forEach(link => {
|
||
link.addEventListener('click', (e) => {
|
||
e.preventDefault();
|
||
switchExperiment(link.dataset.experiment);
|
||
});
|
||
});
|
||
|
||
// 测试内容切换
|
||
const quizLinks = document.querySelectorAll('.quiz-link');
|
||
const quizContents = document.querySelectorAll('.quiz-content');
|
||
|
||
function switchQuiz(quizId) {
|
||
// 更新测试链接状态
|
||
quizLinks.forEach(link => {
|
||
if (link.dataset.quiz === quizId) {
|
||
link.classList.add('active');
|
||
} else {
|
||
link.classList.remove('active');
|
||
}
|
||
});
|
||
|
||
// 更新测试内容
|
||
quizContents.forEach(content => {
|
||
if (content.id === quizId + '-quiz') {
|
||
content.classList.add('active');
|
||
} else {
|
||
content.classList.remove('active');
|
||
}
|
||
});
|
||
}
|
||
|
||
quizLinks.forEach(link => {
|
||
link.addEventListener('click', (e) => {
|
||
e.preventDefault();
|
||
switchQuiz(link.dataset.quiz);
|
||
});
|
||
});
|
||
|
||
// FAQ切换
|
||
const faqQuestions = document.querySelectorAll('.faq-question');
|
||
faqQuestions.forEach(question => {
|
||
question.addEventListener('click', () => {
|
||
const answer = question.nextElementSibling;
|
||
const icon = question.querySelector('i');
|
||
|
||
answer.classList.toggle('hidden');
|
||
icon.classList.toggle('rotate-180');
|
||
});
|
||
});
|
||
|
||
// 首页推荐学习链接
|
||
const homeLinks = document.querySelectorAll('[data-tab-link]');
|
||
homeLinks.forEach(link => {
|
||
link.addEventListener('click', (e) => {
|
||
e.preventDefault();
|
||
const tabId = link.dataset.tabLink;
|
||
switchTab(tabId);
|
||
|
||
if (tabId === 'tutorials' && link.dataset.tutorial) {
|
||
switchTutorial(link.dataset.tutorial);
|
||
} else if (tabId === 'interactive' && link.dataset.interactive) {
|
||
switchExperiment(link.dataset.interactive);
|
||
} else if (tabId === 'quiz' && link.dataset.quiz) {
|
||
switchQuiz(link.dataset.quiz);
|
||
}
|
||
});
|
||
});
|
||
|
||
// 虚拟LED控制
|
||
const toggleLedBtn = document.getElementById('toggle-led');
|
||
const virtualLed = document.getElementById('virtual-led');
|
||
let ledState = false;
|
||
|
||
if (toggleLedBtn && virtualLed) {
|
||
toggleLedBtn.addEventListener('click', () => {
|
||
ledState = !ledState;
|
||
if (ledState) {
|
||
virtualLed.classList.remove('bg-gray-600');
|
||
virtualLed.classList.add('bg-yellow-400');
|
||
} else {
|
||
virtualLed.classList.remove('bg-yellow-400');
|
||
virtualLed.classList.add('bg-gray-600');
|
||
}
|
||
});
|
||
}
|
||
|
||
// 编译和运行按钮
|
||
const compileBtn = document.getElementById('compile-btn');
|
||
const runBtn = document.getElementById('run-btn');
|
||
|
||
if (compileBtn) {
|
||
compileBtn.addEventListener('click', () => {
|
||
alert('代码编译成功！');
|
||
});
|
||
}
|
||
|
||
if (runBtn) {
|
||
runBtn.addEventListener('click', () => {
|
||
// 模拟LED闪烁
|
||
let interval = setInterval(() => {
|
||
ledState = !ledState;
|
||
if (ledState) {
|
||
virtualLed.classList.remove('bg-gray-600');
|
||
virtualLed.classList.add('bg-yellow-400');
|
||
} else {
|
||
virtualLed.classList.remove('bg-yellow-400');
|
||
virtualLed.classList.add('bg-gray-600');
|
||
}
|
||
}, 500);
|
||
|
||
// 5秒后停止闪烁
|
||
setTimeout(() => {
|
||
clearInterval(interval);
|
||
}, 5000);
|
||
});
|
||
}
|
||
|
||
// 基础概念测试
|
||
const basicQuizQuestions = [
|
||
{
|
||
question: "1. 单片机是一种集成了哪些功能的微型计算机芯片？",
|
||
options: ["A. 只集成了CPU", "B. 集成了CPU、存储器和I/O接口", "C. 只集成了存储器", "D. 集成了CPU和显示器"],
|
||
correctAnswer: "B",
|
||
explanation: "单片机是一种将CPU、存储器（RAM、ROM）和输入/输出接口（I/O）等功能集成在一个芯片上的微型计算机。"
|
||
},
|
||
{
|
||
question: "2. 下列哪种不是单片机的常见应用领域？",
|
||
options: ["A. 家用电器控制", "B. 工业自动化", "C. 超级计算机", "D. 智能玩具"],
|
||
correctAnswer: "C",
|
||
explanation: "单片机主要用于控制和嵌入式系统，而超级计算机是高性能计算设备，不使用单片机。"
|
||
},
|
||
{
|
||
question: "3. STM32系列单片机基于哪种内核？",
|
||
options: ["A. 8051内核", "B. ARM Cortex-M内核", "C. PIC内核", "D. AVR内核"],
|
||
correctAnswer: "B",
|
||
explanation: "STM32系列单片机是由ST公司生产的基于ARM Cortex-M内核的32位单片机。"
|
||
},
|
||
{
|
||
question: "4. 单片机中的RAM主要用于存储什么？",
|
||
options: ["A. 程序代码", "B. 固定数据", "C. 临时数据和变量", "D. 操作系统"],
|
||
correctAnswer: "C",
|
||
explanation: "RAM（随机存取存储器）主要用于存储程序运行过程中的临时数据、变量和堆栈等。"
|
||
},
|
||
{
|
||
question: "5. 下列哪种不是常见的单片机通信接口？",
|
||
options: ["A. UART", "B. SPI", "C. I2C", "D. HDMI"],
|
||
correctAnswer: "D",
|
||
explanation: "UART、SPI和I2C都是单片机常用的通信接口，而HDMI是高清视频接口，一般不用于单片机。"
|
||
}
|
||
];
|
||
|
||
let currentQuestionIndex = 0;
|
||
let score = 0;
|
||
let answeredQuestions = new Array(basicQuizQuestions.length).fill(false);
|
||
let selectedOptions = [];
|
||
|
||
const currentQuestionEl = document.getElementById('current-question');
|
||
const totalQuestionsEl = document.getElementById('total-questions');
|
||
const scoreEl = document.getElementById('score');
|
||
const quizProgressBarEl = document.getElementById('quiz-progress-bar');
|
||
const questionTextEl = document.getElementById('question-text');
|
||
const optionsContainerEl = document.getElementById('options-container');
|
||
const explanationContainerEl = document.getElementById('explanation-container');
|
||
const explanationTextEl = document.getElementById('explanation-text');
|
||
const prevQuestionBtn = document.getElementById('prev-question');
|
||
const nextQuestionBtn = document.getElementById('next-question');
|
||
const quizContainerEl = document.getElementById('quiz-container');
|
||
const quizResultEl = document.getElementById('quiz-result');
|
||
const finalScoreEl = document.getElementById('final-score');
|
||
const maxScoreEl = document.getElementById('max-score');
|
||
const resultMessageEl = document.getElementById('result-message');
|
||
const restartQuizBtn = document.getElementById('restart-quiz');
|
||
|
||
function loadQuestion(index) {
|
||
const question = basicQuizQuestions[index];
|
||
questionTextEl.textContent = question.question;
|
||
|
||
// 清空选项容器
|
||
optionsContainerEl.innerHTML = '';
|
||
|
||
// 添加选项
|
||
question.options.forEach((option, i) => {
|
||
const optionEl = document.createElement('div');
|
||
optionEl.className = 'quiz-option p-3 border rounded-lg';
|
||
optionEl.dataset.option = String.fromCharCode(65 + i); // A, B, C, D...
|
||
optionEl.textContent = option;
|
||
|
||
// 如果已经回答过这个问题，显示正确/错误状态
|
||
if (answeredQuestions[index]) {
|
||
const selectedOption = optionEl.dataset.option;
|
||
if (selectedOption === question.correctAnswer) {
|
||
optionEl.classList.add('correct');
|
||
} else if (selectedOption === selectedOptions[index]) {
|
||
optionEl.classList.add('incorrect');
|
||
}
|
||
optionEl.classList.add('selected');
|
||
}
|
||
|
||
optionEl.addEventListener('click', () => selectOption(optionEl));
|
||
optionsContainerEl.appendChild(optionEl);
|
||
});
|
||
|
||
// 更新进度
|
||
currentQuestionEl.textContent = index + 1;
|
||
totalQuestionsEl.textContent = basicQuizQuestions.length;
|
||
quizProgressBarEl.style.width = `${(index + 1) / basicQuizQuestions.length * 100}%`;
|
||
|
||
// 更新按钮状态
|
||
prevQuestionBtn.disabled = index === 0;
|
||
prevQuestionBtn.classList.toggle('opacity-50', index === 0);
|
||
prevQuestionBtn.classList.toggle('cursor-not-allowed', index === 0);
|
||
|
||
if (index === basicQuizQuestions.length - 1) {
|
||
nextQuestionBtn.innerHTML = '完成测试 <i class="fa fa-check-circle ml-2"></i>';
|
||
} else {
|
||
nextQuestionBtn.innerHTML = '下一题 <i class="fa fa-chevron-right ml-2"></i>';
|
||
}
|
||
|
||
// 隐藏解释
|
||
explanationContainerEl.classList.add('hidden');
|
||
}
|
||
|
||
function selectOption(optionEl) {
|
||
const currentQuestion = basicQuizQuestions[currentQuestionIndex];
|
||
|
||
// 如果已经回答过，不允许再次选择
|
||
if (answeredQuestions[currentQuestionIndex]) return;
|
||
|
||
// 移除其他选项的选中状态
|
||
document.querySelectorAll('.quiz-option').forEach(opt => {
|
||
opt.classList.remove('selected');
|
||
});
|
||
|
||
// 添加当前选项的选中状态
|
||
optionEl.classList.add('selected');
|
||
|
||
// 记录选择的选项
|
||
selectedOptions[currentQuestionIndex] = optionEl.dataset.option;
|
||
|
||
// 标记为已回答
|
||
answeredQuestions[currentQuestionIndex] = true;
|
||
|
||
// 检查是否正确
|
||
const isCorrect = optionEl.dataset.option === currentQuestion.correctAnswer;
|
||
if (isCorrect) {
|
||
score++;
|
||
scoreEl.textContent = score;
|
||
optionEl.classList.add('correct');
|
||
} else {
|
||
optionEl.classList.add('incorrect');
|
||
// 显示正确答案
|
||
document.querySelector(`.quiz-option[data-option="${currentQuestion.correctAnswer}"]`).classList.add('correct');
|
||
}
|
||
|
||
// 显示解释
|
||
explanationTextEl.textContent = currentQuestion.explanation;
|
||
explanationContainerEl.classList.remove('hidden');
|
||
}
|
||
|
||
function showResult() {
|
||
quizContainerEl.classList.add('hidden');
|
||
quizResultEl.classList.remove('hidden');
|
||
|
||
finalScoreEl.textContent = score;
|
||
maxScoreEl.textContent = basicQuizQuestions.length;
|
||
|
||
// 根据得分显示不同的消息
|
||
const percentage = score / basicQuizQuestions.length * 100;
|
||
if (percentage >= 80) {
|
||
resultMessageEl.textContent = '太棒了！你对单片机基础概念掌握得很好！';
|
||
} else if (percentage >= 60) {
|
||
resultMessageEl.textContent = '不错！你已经掌握了大部分基础知识，继续加油！';
|
||
} else {
|
||
resultMessageEl.textContent = '继续努力！建议重新学习基础概念部分。';
|
||
}
|
||
}
|
||
|
||
function restartQuiz() {
|
||
currentQuestionIndex = 0;
|
||
score = 0;
|
||
answeredQuestions = new Array(basicQuizQuestions.length).fill(false);
|
||
selectedOptions = [];
|
||
scoreEl.textContent = '0';
|
||
|
||
quizResultEl.classList.add('hidden');
|
||
quizContainerEl.classList.remove('hidden');
|
||
|
||
loadQuestion(0);
|
||
}
|
||
|
||
if (prevQuestionBtn) {
|
||
prevQuestionBtn.addEventListener('click', () => {
|
||
if (currentQuestionIndex > 0) {
|
||
currentQuestionIndex--;
|
||
loadQuestion(currentQuestionIndex);
|
||
}
|
||
});
|
||
}
|
||
|
||
if (nextQuestionBtn) {
|
||
nextQuestionBtn.addEventListener('click', () => {
|
||
if (currentQuestionIndex < basicQuizQuestions.length - 1) {
|
||
currentQuestionIndex++;
|
||
loadQuestion(currentQuestionIndex);
|
||
} else {
|
||
showResult();
|
||
}
|
||
});
|
||
}
|
||
|
||
if (restartQuizBtn) {
|
||
restartQuizBtn.addEventListener('click', restartQuiz);
|
||
}
|
||
|
||
// 初始化测试
|
||
if (currentQuestionEl) {
|
||
loadQuestion(0);
|
||
}
|
||
|
||
// 初始化进度条
|
||
const progressBars = document.querySelectorAll('.progress');
|
||
progressBars.forEach(bar => {
|
||
const randomProgress = Math.floor(Math.random() * 30); // 随机进度，用于演示
|
||
bar.style.width = `${randomProgress}%`;
|
||
bar.parentElement.previousElementSibling.querySelector('span:last-child').textContent = `${randomProgress}%`;
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |