只需要一个html文件就可以制作一个计算器，代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>网页计算器</title>
	</head>
	<body style="background-color: aqua;">

		<center>

			<h1>网页计算器</h1>

			<p style="font-size: 200%;">请输入第一个数：</p><input type="text" id="num1" size="50">
			
			<br>
			
			<p style="font-size:200%">请选择一个运算符号：</p><select size="1" name="select" id="function">
				<option>加</option>
				<option>减</option>
				<option>乘</option>
				<option>除</option>
				</select>
				
			<br>
				
			<p style="font-size:200%;">请输入第二个数：</p><input type="text" id="num2" size="50">
			
			<br><br>
			
			<a href="#" onclick="equal()" style="font-size:200%;">计算</a>

			<br><br>
			
			<h1 style="color: black;" id="result"></h2>
			

		</center>

	</body>

	<script>
	
		function equal(){
			//两个数的变量
			var num1 = parseFloat(document.getElementById("num1").value);
			var num2 = parseFloat(document.getElementById("num2").value);
			
			//运算符号
			var sel = document.getElementById("function");
			var func = sel.options[sel.selectedIndex].value;
			delete sel;
				
			//正式运算
			var result = 0;
			if (func=="加") {
				result = num1+num2;
			}else if (func=="减") {
				result = num1-num2;
			}else if (func=="乘") {
				result = num1*num2;
			} else {
				result = num1/num2;
			}

			
			//显示
			if(isNaN(result)) {
				document.getElementById("result").style.color = "red";
				document.getElementById("result").innerHTML="请输入正确的数字。";
			}else if (num2==0 && func=="除"){
				document.getElementById("result").style.color = "red";
			    document.getElementById("result").innerHTML="除数不能为零。";
			}else {
				document.getElementById("result").style.color = "black";
				document.getElementById("result").innerHTML="最终的结果是" + result.toString();
			}

			//清除文本框里的文本
			document.getElementById("num1").value = "";
			document.getElementById("num2").value = "";
		}
	
	</script>
</html>

不忘点赞加关注哦！

更多推荐

制作一个最基本的网页计算器