练习-实现两个数的四则运算 需求描述 单击页面中“计算两数运算结果”按钮时,调用函数,使用 prompt0方法获取两个变量和一个运算符,效果如图 2.5~图28 所示。获取变量和运算符后将计算结果输出在页面中,效果如图 2.8 所示
时间: 2023-11-27 08:52:23 浏览: 35
简单布尔运算
好的,这里给出一个简单的实现:
HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>计算器</title>
</head>
<body>
<div>
<label>第一个数:</label>
<input type="text" id="num1">
</div>
<div>
<label>第二个数:</label>
<input type="text" id="num2">
</div>
<div>
<label>运算符:</label>
<select id="operator">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
</div>
<button onclick="calc()">计算两数运算结果</button>
<div>
<label>结果:</label>
<span id="result"></span>
</div>
</body>
</html>
```
JavaScript代码:
```javascript
function calc() {
var num1 = parseInt(document.getElementById("num1").value);
var num2 = parseInt(document.getElementById("num2").value);
var operator = document.getElementById("operator").value;
var result;
switch (operator) {
case "+":
result = num1 + num2;
break;
case "-":
result = num1 - num2;
break;
case "*":
result = num1 * num2;
break;
case "/":
result = num1 / num2;
break;
default:
result = "运算符错误";
break;
}
document.getElementById("result").innerHTML = result;
}
```
以上代码实现了一个简单的计算器功能,用户可以输入两个数和一个运算符,点击“计算两数运算结果”按钮后,页面会显示计算结果。实现过程比较简单,主要使用了 HTML 的表单和 JavaScript 的 switch 语句。
阅读全文