js实现简易计算器

Posted 2023-02-09 wjinhhua

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js实现简易计算器相关的知识，希望对你有一定的参考价值。

<!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>

以上是关于js实现简易计算器的主要内容，如果未能解决你的问题，请参考以下文章