javascript 小白小项目 --- 简易计算器

1.效果
2.代码：
<!DOCTYPE html>
<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<script>
			<!--计算函数 -->
			function calculate(){
				var num1_obj = document.getElementById("num1").value;<!--获取第一个输入框的值（字符串来的） -->
				var num2_obj = document.getElementById("num2").value;<!--获取第二个输入框的值（字符串来的）-->
				var result = document.getElementById("result");
				
				var num1 = parseFloat(num1_obj);<!-- 把字符串变成浮点数-->
				var num2 = parseFloat(num2_obj);
				
				var operator = document.getElementById("operator").value;<!--获取选择的运算符 -->
				if(operator == "+"){	<!-- 若为加法运算-->
					result.value = num1 + num2;
					isErr(result.value);
				}
				else if(operator == "-"){	<!-- 若为减法运算-->
					result.value = num1 - num2;
					isErr(result.value);
				}
				else if(operator == "*"){	<!-- 若为乘法运算-->
					result.value = num1 * num2;
					isErr(result.value);
				}
				else if(operator == "/"){	<!-- 若为除法运算-->
					result.value = num1 / num2;
					isErr(result.value);
				}
			}
			
			<!-- 判断输出结果是否正常-->
			function isErr(result){
				if(result == Infinity || result =="NaN"){
					alert("输入计算数据异常");
				}
			}
		</script>
	<head>
	<body>
		<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">
		=
		<input type="text" id="result">
		<input type="button" value="点击计算" onclick="calculate()">
	</body>
</html>
javascript 小白小项目 --- 简易计算器

猜你喜欢
