js实现简易计算器

最新推荐文章于 2024-07-19 23:51:23 发布

wjinhhua

最新推荐文章于 2024-07-19 23:51:23 发布

阅读量179

点赞数

本文链接：https://blog.csdn.net/wjinhhua/article/details/103317711

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>计算器测试</title>
</head>
<body>
<table>
    <tr>
	    <td colspan="4"><input type = "text" class="txt"  disable/></td>
	</tr>
    <tr>
	    <td><input type = "button" class="numbtn" value ="1" /></td>
		<td><input type = "button" class="numbtn" value ="2" /></td>
		<td><input type = "button" class="numbtn" value ="3" /></td>
		<td><input type = "button" class="calbtn" value ="+" /></td>
	</tr>
	<tr>
	    <td><input type = "button" class="numbtn" value ="4" /></td>
		<td><input type = "button" class="numbtn" value ="5" /></td>
		<td><input type = "button" class="numbtn" value ="6" /></td>
		<td><input type = "button" class="calbtn" value ="-" /></td>
	</tr>
	<tr>
	    <td><input type = "button" class="numbtn" value ="7" /></td>
		<td><input type = "button" class="numbtn" value ="8" /></td>
		<td><input type = "button" class="numbtn" value ="9" /></td>
		<td><input type = "button" class="calbtn" value ="*" /></td>
	</tr>
	<tr>
	    <td colspan="3"><input type = "button" class="numbtn" value ="0" /></td>
		<td><input type = "button" class="calbtn" value ="/" /></td>
	</tr>
	<tr>
	    <td><input type = "button" class="funbtn" value ="Del" /></td>
		<td><input type = "button" class="funbtn" value ="Asc" /></td>
		<td><input type = "button" id="evalbtn" value ="=" /></td>
	</tr>
</table>

<script>
   window.onload= function(){
	   var numarr = [];
	   var calarr = [];
	   var temp='';
	   var txt = document.getElementsByClassName("txt")[0];
	   var btnnum = document.getElementsByClassName("numbtn");
	   var btncal = document.getElementsByClassName("calbtn");
	   var btnfun = document.getElementsByClassName("funbtn");
	   
	    for(var i= 0; i<btnfun.length; i++){
			btnfun[i].onclick = function(){
			   if(this.value == "Del"){
			       var curlast = txt.value.charAt(txt.value.length-1);
				   if(curlast == "+" || curlast =="-" || curlast =="*" || curlast =="/"){
				      //numarr.splice(numarr.length-1,1);
				      calarr.splice(calarr.length-1,1);
				   }
			       var cur = txt.value.substr(0,txt.value.length-1);
			       txt.value = cur;
				   temp = cur;
	           }else{
			       numarr = [];
	               calarr = [];
				   temp = '';
				   txt.value ='';
				   last = 0;
			   }
		    };
		
       }
	   
	   for(var i= 0; i< btnnum.length; i++){
			btnnum[i].onclick = function(){
			   temp = temp + this.value;
			   txt.value = temp;
		    };
		
       }
	   var last = 0;
	    for(var i= 0; i< btncal.length; i++){
			btncal[i].onclick = function(){
			   var cal = this.value;
			   calarr.push(cal);
			   temp = temp+cal;
			   txt.value = temp;  
			   var result = temp.substring(last, temp.lastIndexOf(cal));
			   if(!isNaN(parseInt(result))){
			      numarr.push(parseInt(result));
			   }
			   last = temp.length;
		    };
		
       }
	   
	   document.getElementById("evalbtn").onclick = function(){
	       var rel = txt.value;
		   rel = rel.substr(last);
		   numarr.push(parseInt(rel));
	       var result = calculate(numarr, calarr);
		   txt.value = result;
		   numarr = [];
	       calarr = [];
		   temp='';
		   last = 0;
	   }
	  
   }

function calculate(nums, cals){
	//var nums = [9, 8, 5, 6, 2, 8, 4, 3, 7];
	//var cals = ["+","*","-","/","-","/","+","*"];
	var temp = 0;
	//计算乘除法
	for(var i= 0; i<cals.length; i++){
		if(cals[i] == "*" || cals[i] == "/"){
			if(cals[i] == "*"){
			  temp = nums[i] * nums[i+1];
			}else{
              temp = nums[i] / nums[i+1];
			}
			nums.splice(i,2);//从第i个位置起，删除2个
			nums.splice(i,0,temp);//从第i个位置起，不删除，插入
			cals.splice(i,1);
            i = i-1;			
		}
	}
	
	//计算加减法
	for(var i= 0; i<cals.length; i++){
		if(cals[i] == "+" || cals[i] == "-"){
			if(cals[i] == "+"){
			  temp = nums[i] + nums[i+1];
			}else{
              temp = nums[i] - nums[i+1];
			}
			nums.splice(i,2);
			nums.splice(i,0,temp);
			cals.splice(i,1); 
			i= i-1;
		}
	}	
	return temp;
}
</script>

</body>
</html>