🎯 课程目标
完成本课程后，你将能够：
- 使用 AI 创建带交互功能的网页应用
- 理解事件处理和函数调用
- 掌握基本的数学运算逻辑
- 完成一个功能完整的计算器
🧮 计算器需求
功能要求：
- 显示区域：显示输入和计算结果
- 数字按钮：0-9
- 运算符：+ - × ÷
- 功能键：=（计算）、C（清除）、←（退格）
- 小数点支持
💬 向 AI 描述需求
"请帮我创建一个网页计算器，要求：
## 功能需求
1. 显示区域：显示当前输入和计算结果
2. 数字按钮：0-9 共10个按钮
3. 运算符：+ - × ÷
4. 等号：执行计算
5. 清除键：清空所有输入
6. 小数点：支持小数运算
## 设计要求
- 简洁的设计风格
- 按钮布局合理，方便点击
- 响应式设计
- 带有悬停和点击效果"
💻 核心代码示例
HTML 结构
<div class="calculator">
<input type="text" id="display" readonly>
<div class="buttons">
<button class="btn clear">C</button>
<button class="btn operator">÷</button>
<button class="btn number">7</button>
</div>
</div>
JavaScript 逻辑
let currentInput = '';
let previousInput = '';
let operator = null;
function appendNumber(number) {
currentInput += number;
updateDisplay();
}
function chooseOperator(op) {
if (currentInput === '') return;
previousInput = currentInput;
operator = op;
currentInput = '';
}
function compute() {
let result;
const prev = parseFloat(previousInput);
const current = parseFloat(currentInput);
if (isNaN(prev) || isNaN(current)) return;
switch (operator) {
case '+': result = prev + current; break;
case '-': result = prev - current; break;
case '×': result = prev * current; break;
case '÷': result = prev / current; break;
}
currentInput = result;
operator = null;
updateDisplay();
}
🎯 课后练习
完成以下挑战：
- 使用 AI 创建计算器并成功运行
- 测试各种运算是否正确
- （进阶）添加百分比运算 (%)
- （进阶）添加键盘支持
- 调整样式直到满意