得是1. 项目概述：2-4线译码器的HTML实现
在数字电路设计中，2-4线译码器是最基础的组合逻辑电路之一。最近我在用HTML+CSS+JavaScript模拟数字电路时，发现用前端技术实现这个经典电路特别适合教学演示。不同于Verilog或电路仿真软件，网页版译码器可以直接在浏览器中运行，无需安装任何专业工具，这对电子工程初学者特别友好。
这个HTML版2-4线译码器完整实现了真值表功能：通过两个输入开关控制四个输出LED的状态。当用户点击网页上的A/B开关时，对应的Y0-Y3输出端会实时亮起或熄灭。所有逻辑运算都在浏览器中用JavaScript完成，CSS负责模拟LED的发光效果，而HTML则构建了整个交互界面。
提示：这个项目虽然代码量不大（约100行），但完整呈现了从真值表到逻辑表达式再到电路实现的全过程，是理解数字电路原理的绝佳案例。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 核心设计思路与技术选型
2.1 译码器原理分析
2-4线译码器的本质是将2位二进制输入转换为4个互斥的输出。其真值表如下：
| 输入A | 输入B | Y0 | Y1 | Y2 | Y3 |
|---|---|---|---|---|---|
| 0 | 0 | 1 | 0 | 0 | 0 |
| 0 | 1 | 0 | 1 | 0 | 0 |
| 1 | 0 | 0 | 0 | 1 | 0 |
| 1 | 1 | 0 | 0 | 0 | 1 |
对应的逻辑表达式为：
- Y0 = ¬A ∧ ¬B
- Y1 = ¬A ∧ B
- Y2 = A ∧ ¬B
- Y3 = A ∧ B
2.2 前端技术实现方案
为实现这个逻辑，我选择了最轻量级的技术组合：
- HTML结构：用
<div>模拟电路板，<input type="checkbox">作为开关，<span>元素模拟LED - CSS样式：
- 开关使用
appearance: none自定义样式 - LED通过
box-shadow实现发光效果 - 添加
transition实现状态平滑过渡
- 开关使用
- JavaScript逻辑：