用js写一个网页计算器
时间: 2023-09-28 11:09:54 浏览: 82
js实现网页计算器
5星 · 资源好评率100%
好的,以下是一个简单的网页计算器的js代码实现:
HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>网页计算器</title>
<meta charset="UTF-8">
</head>
<body>
<div>
<input type="text" id="input1" placeholder="请输入第一个数">
<select id="operator">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" id="input2" placeholder="请输入第二个数">
<button onclick="calculate()">计算</button>
<br>
<label>计算结果:</label>
<input type="text" id="result" readonly>
</div>
</body>
</html>
```
JS代码:
```js
function calculate() {
var input1 = parseFloat(document.getElementById("input1").value);
var input2 = parseFloat(document.getElementById("input2").value);
var operator = document.getElementById("operator").value;
var result = 0;
switch (operator) {
case "+":
result = input1 + input2;
break;
case "-":
result = input1 - input2;
break;
case "*":
result = input1 * input2;
break;
case "/":
result = input1 / input2;
break;
}
document.getElementById("result").value = result.toFixed(2); //保留两位小数
}
```
以上代码实现了一个简单的网页计算器,用户可以在输入框中输入两个数值和运算符,点击计算按钮后,页面会将计算结果展示在结果输入框中。
阅读全文