练习-实现两个数的四则运算 需求描述 单击页面中“计算两数运算结果”按钮时,调用函数,使用 prompt0方法获取两个变量和一个运算符,效果如图 2.5~图28 所示。获取变量和运算符后将计算结果输出在页面中,效果如图 2.8 所示
时间: 2023-11-27 08:53:17 浏览: 55
这是一个简单的实现两个数的四则运算的 JavaScript 代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>计算器</title>
<meta charset="UTF-8">
</head>
<body>
<h1>计算器</h1>
<p>请输入两个数字和一个运算符进行计算:</p>
<label>第一个数字:</label>
<input type="text" id="num1"><br><br>
<label>第二个数字:</label>
<input type="text" id="num2"><br><br>
<label>运算符:</label>
<input type="text" id="operator"><br><br>
<button onclick="calculate()">计算两数运算结果</button>
<p id="result"></p>
<script>
function calculate(){
var num1 = parseFloat(document.getElementById("num1").value);
var num2 = parseFloat(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 = "请输入正确的运算符";
}
document.getElementById("result").innerHTML = "结果:" + result;
}
</script>
</body>
</html>
```
在这个代码中,我们定义了一个 `calculate` 函数来处理计算逻辑。首先,我们使用 `parseFloat` 方法从页面中获取输入的两个数字和一个运算符。然后,我们使用 `switch` 语句来根据运算符进行计算,并将计算结果显示在页面中。注意,在除法运算时,需要判断第二个数字是否为 0。
这个实现可以满足基本的计算需求,但是还有很多可以改进的地方。例如,可以添加输入校验、界面美化等功能,以提高用户体验。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)