当先锋百科网

首页 1 2 3 4 5 6 7

求一个简单计算器的html代码

近来我在学习HTML编程，需要实现一个简单的计算器功能，但是一直找不到合适的代码。于是我翻阅了很多相关文档和资料，最终成功地实现了这个功能。

求一个简单计算器的html代码

下面是我使用的HTML代码，使用了pre标签来显示代码:


<!DOCTYPE html>
<html>
<head>
	<title>简单计算器</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;
		if (operator == "+") {
			result = num1 + num2;
		} else if (operator == "-") {
			result = num1 - num2;
		} else if (operator == "*") {
			result = num1 * num2;
		} else if (operator == "/") {
			result = num1 / num2;
		}
		document.getElementById("result").innerHTML = result;
	}
	</script>
</head>
<body>
	<h2>简单计算器</h2>
	<input type="text" id="num1"> 
	<select id="operator">
		<option value="+">+</option>
		<option value="-">-</option>
		<option value="*">*</option>
		<option value="/">/</option>
	</select>
	<input type="text" id="num2"> 
	<button onclick="calculate()">计算</button>
	<p>计算结果为: <span id="result"></span></p>
</body>
</html>

这个代码很简单明了，主要使用了四则运算和输入框、下拉框、按钮等HTML元素来实现计算器的功能。当用户输入两个数字和所要进行的运算符后，按下“计算”按钮，就可以得到计算结果。

感谢网上的大佬们分享了这个实现计算器的代码，让我在学习过程中受益匪浅。