第7课：做一个网页计算器
进度 0/12
🧮
做一个网页计算器
从零做一个能用的网页计算器——你的第一个完整项目
📖知识引入
🏗️项目骨架
网页软件三件套：HTML（结构）、CSS（样子）、JavaScript（行为）。计算器骨架就是一个div包着显示屏和按钮们。你不用从头写，告诉Trae需求，它三个文件一并生成。
📐界面布局
经典计算器布局：顶部一个显示屏，下面4x4按钮网格（数字0-9、加减乘除、等号、清空）。用CSS的Grid布局一行搞定，按钮整齐美观，手机和电脑都能用。
⚡按钮逻辑
JavaScript给每个按钮加点击事件：数字按钮把数字加到显示屏；运算符按钮记录「现在要做加法」；等号按钮执行运算显示结果；清空按钮一键归零。
➕运算功能
难点是「连续运算」：用户按 3+5+2，期待10而不是只算 5+2。技巧是用一个变量记住「上次的运算符」和「上次的值」，等号时先算上一次再开始新的。
🎨调试与美化
AI生成后逐个按钮点一遍：3+5=8对吗？清空能用吗？小数点会乱吗？发现Bug报给AI修。最后美化：圆角、阴影、按下变色的反馈，让计算器像App一样精致。
💡
网页三件套：HTML搭骨架、CSS化妆、JavaScript让它动起来！
🔍用Trae做计算器的完整流程
<!-- AI生成的骨架大概长这样 -->
<!-- index.html -->
<div class="calculator">
<input class="display" readonly>
<div class="buttons">
<button>7</button><button>8</button>
<button>9</button><button>/</button>
<!-- ...省略其他按钮 -->
<button class="equals">=</button>
</div>
</div>
// script.js 核心逻辑
let current = "", prev = null, op = null;
function press(key) {
if (key === "=") {
current = String(calc(prev, op, current));
prev = null; op = null;
} else if (["+", "-", "*", "/"].includes(key)) {
prev = current; op = key; current = "";
} else {
current += key;
}
updateDisplay();
}跟着做，第一个完整项目诞生：
第1步 新建项目文件夹 `trae-projects/calculator/` Open Folder打开它
第2步 提需求（这样说） 「用HTML+CSS+JS做一个计算器： - 顶部显示屏，下面4x4按钮网格 - 数字0-9、加减乘除、等号、清空 - 支持连续运算如 3+5+2=10 - 圆角按钮，按下有反馈 - 居中显示，配色淡蓝」
第3步 AI生成三个文件 calculator/ ├─ index.html （结构） ├─ style.css （样式） └─ script.js （逻辑）
第4步 打开 index.html 测试 双击或在Trae里右键Open with Live Server 按按钮验证：3+5=8？清空？连续运算？
第5步 迭代修改 「加小数点按钮和退格按钮」 「按钮再大一点，字体加粗」 每轮运行验证，直到满意。
第6步 给同学用 把整个文件夹打包发给同学， 双击 index.html 就能用！
你的第一个真实软件， 就此诞生！🎉
🎯小测验
第1题：网页软件的三件套是？
第2题：计算器最难的功能通常是？
第3题：用Trae做完计算器，怎么让别人用？
📝本课知识点
- ✓网页三件套：HTML+CSS+JS
- ✓计算器布局：显示屏+4x4按钮网格
- ✓难点：连续运算要记住上次值和运算符
- ✓Live Server实时预览效果
- ✓整个文件夹打包即可分享
第7课完成！继续探索下一课吧 🚀