用JavaScript制作简易计算机

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>改善简易计算器</title>
		<script type="text/javascript">
			function compute(obj) { //obj 为形式参数,它代表运算符号
				let num1, num2;
				num1 = Number(document.getElementById("txtNum1").value);
				num2 = Number(document.getElementById("txtNum2").value);
				let result;
				if(isNaN(num1)||isNaN(num2))
				{
					alert("输入的数字有误,请重新输入!");
				}
				else
				{
					switch(obj) {
					case "+":
						result = num1 + num2;
						break;
					case "-":
						result = num1 - num2;
						break;
					case "*":
						result = num1 * num2;
						break;
					case "/":
						if(num2===0)
							alert("除数不能为0");
						else
						{
							result = num1 / num2;
							break;
						}						
					}
					document.getElementById("txtResult").value=result;
				}				
			}
		</script>
	</head>

	<body>
		<form action="" method="post" id="myform" name="myform">
			<table border="0">
				<tr>
					<td><img src="images/shop.gif" width="54" height="54"></td>
					<td colspan="3">
						<h3>改善简易计算器</h3>
					</td>
				</tr>
				<tr>
					<td>第一个数</td>
					<td colspan="3">
						<input name="txtNum1" type="text" id="txtNum1" size="25">
					</td>
				</tr>
				<tr>
					<td>第二个数</td>
					<td colspan="3">
						<input name="txtNum2" type="text" id="txtNum2" size="25">
					</td>
				</tr>
				<tr>
					<td>
						<input name="addButton2" type="button" id="addButton2" value="  +  " onClick="compute('+')">
					</td>
					<td>
						<input name="subButton2" type="button" id="subButton2" value="  -  " onClick="compute('-')">
					</td>
					<td>
						<input name="mulButton2" type="button" id="mulButton2" value="  ×  " onClick="compute('*')">
					</td>
					<td>
						<input name="divButton2" type="button" id="divButton2" value="  ÷  " onClick="compute('/')">
					</td>
				</tr>
				<tr>
					<td>计算结果</td>
					<td colspan="3">
						<input name="txtResult" type="text" id="txtResult" size="25">
					</td>
				</tr>
			</table>
		</form>
	</body>

</html>

实现效果:
在这里插入图片描述

发布了19 篇原创文章 · 获赞 33 · 访问量 329

猜你喜欢

转载自blog.csdn.net/weixin_46430385/article/details/105309282