用js写一个简单加减乘除计算_js加减乘除口算题怎么写-优快云博客

本文链接：https://blog.youkuaiyun.com/lxg7533210/article/details/103621827

本文介绍了一个使用JavaScript实现的简易计算器，通过HTML和CSS进行界面设计，用户可以输入两个数值并选择加、减、乘、除运算，点击等号按钮即可得到计算结果。特别注意，当进行除法运算时，如果第二个数值为0，会弹出警告提示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用js写一个简单加减乘除计算

效果

在这里插入图片描述

代码块

<style type="text/css">
			.num-input{
				width: 50px;
				height: 20px;
				font-size: 14px;
				line-height: 20px;
				padding-left:10px;
			}
				#select-op {
				height: 20px;
				width: 20px;
				font-size: 14px;
				appearance:none; -webkit-appearance:none;
				padding-left:5px;
				
			}
		</style>
		<div class="multiTable" >
			<input type="text" id="first-num" value="" class="num-input"/>
			<select id="select-op" >	
			  <option value ="加">+</option>
			  <option value ="减" >-</option>
			  <option  value="乘" selected>×</option>
			  <option value="除">÷</option>
			</select>
			<input type="text" id="second-num" value="" class="num-input"/>
			<input type="button" name="" id="sum-bt" value="=" onclick="culNum()"/>
			<i id="result-num"></i>
			</div>
		<script type="text/javascript">
			function getDomById(id){
				return document.getElementById(id)
			}
			var culNum= function culNum(){
				/* 获取两个输入框的值,并将其变成float类型，.value获取的值是字符串类型*/
			var a=parseFloat(getDomById("first-num").value) ;
			var b=parseFloat(getDomById("second-num").value);
			
			/* 获取select下拉框里的值 */
			 var myselect =getDomById("select-op");
			var index=myselect.selectedIndex ;  // selectedIndex代表的是你所选中项的index
			var slValue= myselect.options[index].value;
			// 判断slvalue的值再进行简单的加减乘除写入i标签里
			 if(slValue=="加"){
				 getDomById("result-num").innerHTML=a+b ;
			 }else if(slValue=="减"){
				 getDomById("result-num").innerHTML=a-b;
			 }
			 else if(slValue=="乘"){
			 	getDomById("result-num").innerHTML=a*b;		 
			 }
			 else if(slValue=="除"){
				 if(b==0){
					alert("被除数不能为0") 
				 }
			 	getDomById("result-num").innerHTML=a/b;			 
			 }
			}
			
		</script>