<!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>
实现效果: