项目实训:制作简易计算器 用户在弹出的输入框中选择要做的运算 用户选择后弹出两个输入框,让用户输入数据 根据用户选择的操作和输入的数据,计算出最后结果并弹出提示框显示结果 操作界面如下: 函数实现 :函数表达式、匿名函数、箭头函数
时间: 2024-09-10 18:11:12 浏览: 90
制作一个简易计算器的项目实训通常涉及前端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}`;
}
```
阅读全文