莫姐1. 项目概述：当传统风扇遇上智能控制
去年夏天改造卧室风扇的经历让我意识到，给普通风扇加上智能控制模块远没有想象中复杂。这个基于HTML的智慧风扇方案，本质上是通过网页界面实现对风扇的远程控制，核心是用前端技术构建控制面板，再通过微控制器搭建硬件桥梁。相比市面上的成品智能风扇，自制方案成本能控制在百元以内，还能完全自定义功能逻辑。
这个项目特别适合两类人：一是想给老家电升级智能控制的DIY爱好者，二是前端开发者想接触硬件交互的入门实践。整个过程不涉及复杂的电路改造，主要工作量集中在网页控制端的开发上。最终实现的效果是：在手机或电脑浏览器输入特定地址，就能调节风扇风速、设置定时关闭，甚至根据温湿度自动启停。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 硬件架构设计解析
2.1 核心组件选型方案
主控芯片推荐使用NodeMCU ESP8266开发板，这是性价比最高的选择（约25元）。它同时具备WiFi功能和GPIO接口，内置的微控制器可以直接运行Arduino代码。相比树莓派等方案，ESP8266功耗更低，持续运行也不会发热。
风扇改装部分需要准备：
- 5V继电器模块（控制风扇电源通断）
- DHT22温湿度传感器（可选）
- 杜邦线若干
- 旧风扇拆解出的电机部分
重要提示：务必选择带有光耦隔离的继电器模块，避免高压电路对开发板造成损坏。我最初用的廉价继电器就曾导致开发板烧毁。
2.2 电路连接示意图
电路搭建其实只有三个关键连接点：
- ESP8266的GPIO5引脚 → 继电器IN端
- 继电器COM端 → 风扇火线
- 继电器NO端 → 电源插座火线
温湿度传感器接法：
- VCC → 3.3V
- GND → GND
- DATA → GPIO4
整个接线过程不需要焊接，用杜邦线插接即可完成。建议先用面包板测试所有功能正常，再转移到洞洞板固定。
3. 网页控制端开发详解
3.1 HTML控制面板设计
控制界面采用Bootstrap5快速构建响应式布局，核心元素包括：
html复制<div class="container">
<div class="speed-control">
<input type="range" id="speedSlider" min="0" max="3" step="1