简易计算器

最新推荐文章于 2024-06-24 08:33:35 发布

城南没有城北

最新推荐文章于 2024-06-24 08:33:35 发布

阅读量135

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/weixin_42380289/article/details/108108723

版权

笔记专栏收录该内容

73 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			input{
				width: 80px;
			}
			input,select{
				height: 50px;
				padding: 0;
				margin: 0;
				box-sizing: border-box;
			}
		</style>
	</head>
	<body>
		<div class="box">
		<input id="number1" type="text"  />
		<select id="slt" name="">
			<option value="+">+</option>
			<option value="-">-</option>
			<option value="*">*</option>
			<option value="/">/</option>
		</select>
		<input id="number2" type="text"  />
		<button id="btn" type="button" value="">=</button>
		<input id="number3" type="text" readonly="readonly" />
		</div>
		<script type="text/javascript">
			var btn=document.querySelector("#btn");
			btn.addEventListener("click",function(){
				var number1Dom=document.querySelector("#number1");
				var number2Dom=document.querySelector("#number2");
				var number1=number1Dom.value;
				var number2=number2Dom.value;
				
				if(number1==""||number2==""){
					alert("请重新输入")
					return;
				}
				number1=parseFloat(number1);
				number2=parseFloat(number2);
				//取出运算符
				var sltDom=document.querySelector("#slt")
				var slt=sltDom.value;
				//运算结果
				var result;
				switch(slt){
					case"+":{
						result=number1+number2;
						break;
					}
					case"-":{
						result=number1+number2;
						break;
					}
					case"*":{
						result=number1*number2;
						break;
					}
					case"/":{
						result=number1/number2;
						break;
					}
					default:{
						result="非法操作";
					}
					
				}
				var number3Dom=document.querySelector("#number3")
				number3Dom.value=result;
			});
		</script>
	</body>
</html>