首页项目实训：制作简易计算器用户在弹出的输入框中选择要做的运算用户选择后弹出两个输入框，让用户输入数据根据用户选择的操作和输入的数据，计算出最后结果并弹出提示框显示结果操作界面如下：函数实现：函数表达式、匿名函数、箭头函数

项目实训：制作简易计算器用户在弹出的输入框中选择要做的运算用户选择后弹出两个输入框，让用户输入数据根据用户选择的操作和输入的数据，计算出最后结果并弹出提示框显示结果操作界面如下：函数实现：函数表达式、匿名函数、箭头函数

时间: 2024-09-10 19:11:12 浏览: 20

制作一个简易计算器的项目实训通常涉及前端HTML、CSS和JavaScript的结合应用。以下是简要的步骤： 1. HTML结构设计：创建一个包含三个部分的HTML结构：选择运算类型的部分（如按钮或下拉菜单）、两个输入框用于输入数字以及一个提交按钮和结果显示区域。 ```html <!DOCTYPE html> <html lang="zh"> <head> <title>简易计算器</title> </head> <body> <h1>简易计算器</h1> <select id="operator-select"> <option value="add">加</option> <option value="subtract">减</option> <option value="multiply">乘</option> <option value="divide">除</option> </select> <input type="number" id="num1" placeholder="请输入第一个数"> <input type="number" id="num2" placeholder="请输入第二个数"> <button onclick="calculate()">计算</button> <p id="result"></p> </body> </html> ``` 2. JavaScript功能实现：使用JavaScript编写函数`calculate()`，监听选区变化和按钮点击事件，并根据选中的运算符执行相应的计算。 ```javascript function calculate() { const operatorSelect = document.getElementById("operator-select"); const num1 = parseFloat(document.getElementById("num1").value); const num2 = parseFloat(document.getElementById("num2").value); const selectedOperator = operatorSelect.value; let result; switch (selectedOperator) { case "add": result = num1 + num2; break; case "subtract": result = num1 - num2; break; case "multiply": result = num1 * num2; break; case "divide": if (num2 !== 0) { result = num1 / num2; } else { alert("除数不能为零"); return; } break; default: alert("请选择有效的运算符"); return; } document.getElementById("result").innerText = `结果: ${result}`; } ```