JS简易计算器

最新推荐文章于 2024-08-24 09:09:20 发布

村口树下的猪

最新推荐文章于 2024-08-24 09:09:20 发布

阅读量134

点赞数

文章标签： HTML CSS JavaScript 计算前端开发

本文链接：https://blog.csdn.net/weixin_45794194/article/details/119041420

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 设置基本样式 */
			*{padding:0;margin:0;}
			
			div{width:180px;height:200px;border:5px solid orange ;margin:auto;display:flex;justify-content:space-around;flex-wrap:wrap;}
			#t1,#t2,#t3{width:170px;height:20px;}
			#list,#btn{height:20px;width:40px;}
		</style>
	</head>
	<body>
		<div id="">
			<!-- 设置输入框 -->
			<input type="text" name="" id="t1" value=""  style="margin-top:14px;"/>
			<select id="list">
				<option value="+">+</option>
				<option value="-">-</option>
				<option value="*">*</option>
				<option value="/">/</option>
				<option value="%">%</option>
			</select>
			<input type="text" name="" id="t2" value="" />
			<button type="button" id="btn">=</button>
			<input type="text" name="" id="t3" value="" />
		</div>
	</body>
</html>




<script type="text/javascript">
	// 获取输入框文本内容
	var oText1=document.getElementById("t1");
	var oText2=document.getElementById("t2");
	var oText3=document.getElementById("t3");
	var oList=document.getElementById("list");
	var oBtn=document.getElementById("btn");
	
	// 调用函数进行计算
	oBtn.onclick=function(){
		switch(oList.value){
		case"+":
			oText3.value=Number(oText1.value)+Number(oText2.value);
			break;
		case"-":
			oText3.value=Number(oText1.value)-Number(oText2.value);
			break;
		case"*":
			oText3.value=Number(oText1.value)*Number(oText2.value);
			break;
		case"/":
			oText3.value=Number(oText1.value)/Number(oText2.value);
			break;
		case"%":
			oText3.value=Number(oText1.value)%Number(oText2.value);
			break;
		}
	}
</script>