JavaScript实现简单运算器(HTML5)

版权声明:未经博主同意,禁止转载 https://blog.csdn.net/weixin_42130471/article/details/84573011

向HTML网页中嵌入JavaScript,能再浏览器上运行,整个网页代码如下: 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			function calc(){
//				alert("ok");
				//获取两个操作数和一个运算符
				var num1=document.getElementById("num1").value;
				var num2=document.getElementById("num2").value;
				var oper=document.getElementById("oper").value;
				var result;
				if(isNaN(num1)||isNaN(num2)){
					document.getElementById("result").innerHTML="<span style='color: red;'>必须是数字</span>";
					return;
				}
				if(oper=='/'&&num2=='0'){
					document.getElementById("result").innerHTML="<span style='color: red;'>除数不能为零</span>";
					return;
				}
				switch(oper){
					case "+":result=parseFloat(num1)+parseFloat(num2);break;
					case "-":result=parseFloat(num1)-parseFloat(num2);break;
					case "*":result=parseFloat(num1)*parseFloat(num2);break;
					case "/":result=parseFloat(num1)/parseFloat(num2);break;
				}
				document.getElementById("result").innerHTML=result;
			}
			
		</script>
	</head>
	<body>
		<form action="">
			第一个数<input type="text" id="num1" name="name1" value="123"/><br/>
			第二个数<input type="text" id="num2" name="name2" /><br>
			运算符	<select id="oper" nume="oper">
					<option value="+">加</option>
					<option value="-">减</option>
					<option value="*">乘</option>
					<option value="/">除</option>
				</select>
			<input type="button" value="提交" onclick="calc()"/>
			<div id="result">结果</div>
		</form>
	</body>
</html>

要点:

1.触发事件用onclik="calc()";即,点击事件发生后调用在js中定义的calc()函数来计算

2.JavaScript中获取HTML中元素是通过元素id来获取,如:getElementById("num1"),

getElementById("num2"),getElementById("num3")

3.将结果写到网页的指定位置document.getElementById("result").innerHTML=result;其中document.getElementById("result").innerHTML是通过ID获取网页指定位置并修改指定位置的文本内容,这样结果就呈现在网页上了。

4.要判断输入内容只能为数字且除数不能为零,

结果截图:

              

猜你喜欢

转载自blog.csdn.net/weixin_42130471/article/details/84573011