html写出一个带有output计算器实现基本功能代码
时间: 2024-02-13 21:59:45 浏览: 38
下面是一个基本的计算器实现,使用了 HTML5 中的 output 标签来实现结果的输出:
```html
<!DOCTYPE html>
<html>
<head>
<title>Calculator</title>
<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;
}
// 将结果输出到 output 标签中
document.getElementById("result").value = result;
}
</script>
</head>
<body>
<h1>Calculator</h1>
<label for="num1">Number 1:</label>
<input type="number" id="num1" name="num1" />
<br />
<label for="operator">Operator:</label>
<select id="operator" name="operator">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<br />
<label for="num2">Number 2:</label>
<input type="number" id="num2" name="num2" />
<br />
<button onclick="calculate()">Calculate</button>
<br />
<label for="result">Result:</label>
<output id="result" name="result"></output>
</body>
</html>
```
在这个例子中,我们通过 select 标签来选择运算符,通过 input 标签来输入数字,通过 button 标签来触发计算函数。最终的结果通过 output 标签来输出。