devbox
AllinToyou
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

html+css+js 实现计算器_js不使用 eval函数实现科学计算器

作者：AllinToyou | 2024-02-29 05:17:26

赞

踩

js不使用 eval函数实现科学计算器

用JavaScript制作一个计算器，可以进行加、减、乘除、指数、根号、括号运算。

功能上较难实现的是指数与根号运算，但在算法实现上两者其实大同小异。

一种方案是用 ** 直接实现指数运算。

另一种方案较麻烦，也比较锻炼人，则是修改表达式，使之用Math.pow()函数去运算，本次实验中，我使用的也是这种方法。

还需改进的地方：精度问题。

重点掌握eval()


css：

  1. 			table{
  2. 				
  3. 			background-color: white;		
  4. 			height:500px;
  5. 			
  6. 		}
  7. 			
  8. 			td{
  9. 				height:100px;
  10. 				width:120px;
  11. 				background-color: slategray;
  12. 				color:white;	
  13. 				border-collapse: ;
  14. 				text-align:center;
  15. 				font-size:30px;
  16. 			}
  17. 			
  18. 			.left{
  19. 				text-align:left;
  20. 			}
  21. 			
  22. 			.darkorange{
  23. 				background-color: darkorange;
  24. 				
  25. 			}



html：





  1. <form>
  2. 		<table id="table1">			 
  3. 			<tr>
  4. 				
  5. 				<td  class="darkorange" colspan="6">
  6. 					0
  7. 				</td>		
  8. 			</tr>
  9. 			<tr>
  10. 				<td>1</td>
  11. 				<td>2</td>
  12. 				<td>3</td>
  13. 				<td>*</td>
  14. 				<td>/</td>
  15. 				<td>^</td>
  16. 			</tr>
  17. 			<tr>
  18. 				<td>4</td>
  19. 				<td>5</td>
  20. 				<td>6</td>
  21. 				<td>+</td>
  22. 				<td>-</td>
  23. 				<td> root </td>
  24. 			</tr>
  25. 			<tr>
  26. 				<td>7</td>
  27. 				<td>8</td>
  28. 				<td>9</td>
  29. 				<td>(</td>
  30. 				<td>)</td>
  31. 				<td class="darkorange" rowspan="2">=</td>
  32. 			</tr>
  33. 			<tr>
  34. 				<td class="darkorange" colspan="2">c</td>
  35. 				<td>0</td>
  36. 				<td>.</td>
  37. 				<td>del</td>
  38. 				
  39. 			</tr>
  40. 		</table>
  41. 		
  42. 	</form>	
js：




  1. var formula='';
  2. var symbol=0,flag=0,Clear=1,pri=0;
  3. var formula2='';
  4. var row=1,col=0;
  5. var index=0;
  6. for(;row<5;row++){
  7. 	for(col=0;col<6;col++){	
  8. 	if((col==0||col==3||col==4||col==5)&&row==4) 	continue;
  9. 	if(row==3&&col==5) continue;
  10. 	document.getElementById("table1").rows[row].cells[col].addEventListener("click",show,false);
  11. 	}
  12. }
  13.  
  14.  
  15. //del
  16. 	document.getElementById("table1").rows[4].cells[3].addEventListener("click",del,false);
  17. 			
  18. //=
  19. 	document.getElementById("table1").rows[3].cells[5].addEventListener("click",equal,false);	
  20.  
  21.  
  22. //c
  23. 	document.getElementById("table1").rows[4].cells[0].addEventListener("click",clear,false);
  24.  
  25.  
  26. //^
  27. 	document.getElementById("table1").rows[1].cells[5].addEventListener("click",exponent,false);
  28.  
  29.  
  30. //root
  31. 	document.getElementById("table1").rows[2].cells[5].addEventListener("click",root,false);
  32. //right
  33. 	document.getElementById("table1").rows[3].cells[4].addEventListener("click",right,false);
  34. //left	
  35. 	document.getElementById("table1").rows[3].cells[3].addEventListener("click",left,false);
  36.  
  37.  
  38. 	
  39.  
  40.  
  41. function show(){
  42.  
  43.  
  44. 	//have entered "="
  45.  
  46.  
  47. 	if(flag==1){
  48. 	if(!isNaN(this.innerHTML)||this.innerHTML=='.'||this.innerHTML=='('||this.innerHTML==')'){
  49. 		if(this.innerHTML=='0')
  50. 			document.getElementById("table1").rows[0].cells[0].innerHTML="0";	
  51.  
  52.  
  53. 		
  54. 		formula='';
  55. 		formula2='';
  56. 		flag=0;
  57. 	}
  58.  
  59.  
  60. }
  61.  
  62.  
  63. //enter
  64.  
  65.  
  66. // check the first key
  67. 	if(formula.length==0&&flag==0){
  68. 		Clear=0;
  69. 	// enter "0" at the begin		
  70. 		if(this.innerHTML=='0')
  71. 			formula='';
  72. 	// if the first key isNaN
  73. 		else{
  74. 			if( isNaN(this.innerHTML)&&this.innerHTML!='('&&this.innerHTML!=')')
  75. 				formula="0"+this.innerHTML;
  76. 	// if the first key is a number or "()"
  77. 				else
  78. 					formula+=this.innerHTML;
  79.  
  80.  
  81. 			document.getElementById("table1").rows[0].cells[0].innerHTML=formula;	
  82. 			formula2=formula;
  83. 			}
  84. 		}	
  85. 		
  86.  
  87.  
  88.  
  89.  
  90. //not the first key			
  91. 	else{
  92. 		flag=0;
  93. // choose one opearation at one time
  94. 		if(isNaN(this.innerHTML)){
  95. 		var a=formula[formula.length-1];
  96. 		if((isNaN(a)&&a!='('&&a!=')'&&this.innerHTML!='('&&this.innerHTML!=')')||a==' ')	
  97. 			del();			
  98. 		}
  99.  
  100.  
  101. 		formula+=this.innerHTML;
  102.  
  103.  
  104. //  have chosen "^" or "root"
  105. 		if(isNaN(this.innerHTML)&&symbol!=0&&pri==0&&this.innerHTML!='.' ){
  106. 			if(this.innerHTML=='(') pri=1 ;
  107. 			else {
  108. 				formula2+=')';
  109. 				symbol=0;
  110. 			}
  111. 		}
  112.  
  113.  
  114. 	formula2+=this.innerHTML;
  115. 	formula.trim();	
  116. 	document.getElementById("table1").rows[0].cells[0].innerHTML=formula;	
  117. 	}
  118.  
  119.  
  120. }
  121.  
  122.  
  123. //=
  124. function equal(){
  125.  
  126.  
  127. 	if(formula2.length!=0){
  128. 		if(symbol!=0){
  129. 		formula2+=')';
  130. 		symbol=0;
  131. 		}
  132. 		formula2.trim();
  133.  
  134.  
  135. 		try {
  136. 			document.getElementById("table1").rows[0].cells[0].innerHTML=eval(formula2);
  137. 			formula=eval(formula2).toString();
  138. 			formula2=formula;
  139. 			flag=1;
  140.  
  141.  
  142. 		} 
  143. 		catch (Exception) {
  144. 			document.getElementById("table1").rows[0].cells[0].innerHTML="ERROR";
  145. 			formula='';
  146. 			formula2='';
  147. 			flag=1;
  148. 			}
  149. 		}		
  150. 	}
  151.  
  152.  
  153. //c
  154. function clear(){
  155. 	formula='';
  156. 	formula2='';
  157. 	document.getElementById("table1").rows[0].cells[0].innerHTML="0";
  158. 	Clear=1;
  159. }
  160. //del
  161. function del(){
  162. 	if(flag!=1&&Clear!=1){	
  163. 		if(formula[formula.length-1]=='^'||formula[formula.length-1]==' '){
  164.  
  165.  
  166. 			var k=formula2.lastIndexOf('(');
  167. 			var j=formula2.lastIndexOf(',');
  168. 			 formula2 = formula2.substring(0,k-8)+formula2.substring(k+1,j);
  169. 			if(formula[formula.length-1]==' ')		
  170. 			formula=formula.substring(0,formula.length-6);			
  171. 			else
  172. 			formula=formula.substring(0,formula.length-1);
  173. 			symbol=0;
  174. 		}
  175. 		
  176. 		else{
  177. 		formula=formula.substring(0,formula.length-1);
  178. 		formula2=formula2.substring(0,formula2.length-1);
  179. 		
  180. 		}
  181. 		document.getElementById("table1").rows[0].cells[0].innerHTML=formula;
  182. 	}
  183. }
  184. 	
  185. //^
  186. function exponent(){
  187. 	symbol=1;
  188. 	i=formula2.length-2;
  189. 	cal();
  190. }
  191.  
  192.  
  193. //root
  194. function root(){
  195. symbol=2;
  196. i=formula2.length-7;
  197. cal();
  198. }
  199.  
  200.  
  201. // calculate "^" and "root"
  202. function cal(){
  203. 	var temp1='',temp2='';
  204. 	var str="Math.pow(";
  205. 	for(;i>=0;i--){
  206. 		var ch=formula2[i];
  207. 		if(isNaN(ch)&&ch!='.'){
  208. 			if(ch=='(') {
  209. 			str="(Math.pow("
  210. 			continue;	
  211. 			}
  212. 			else	break;
  213. 		}
  214. 		else
  215. 			temp1+=ch;
  216. 					
  217. 	}
  218. 	temp1=temp1.split("").reverse().join("");
  219. 	// ^
  220. 	if(symbol==1)
  221. 	formula2=formula2.substring(0,i+1)+str+temp1+",";
  222. 	// root
  223. 	if(symbol==2)
  224. 	formula2=formula2.substring(0,i+1)+str+temp1+",1/";
  225. 	i=0;
  226. }
  227.  
  228.  
  229. //(
  230. function left(){
  231. 	pri=1;
  232. }
  233. //)
  234. function right(){
  235. 	var j=formula2.length;
  236. 	var k=formula2.lastIndexOf('(');
  237. 	var temp1,temp2;
  238. 	temp2=eval(formula2.substring(k,j));
  239. 	formula2= formula2.substring(0,k)+temp2;
  240. 	pri=0;
  241. }


该实验比较复杂的地方在于它的容错性，在参考了微软自带计算器后，做了如下设置：


              1）初始化界面：


                     ①   显示0；


                     ②   按下等号、删除键：　无反应；


                     ③   按下运算符号：　显示“0”+“运算符号”；


                     ④   按下“.”：　显“０”＋“．”；


                     ⑤   按下数字或括号：　显示数字或括号；


 


              2）按下等号：


                     ①   显示结果；


                     ②   按下等号、删除键：　无反应；


                     ③   按下运算符号：　显示结果+“运算符号”；


                     ④   按下“.”：　初始化，并显“０”＋“．”；


                     ⑤   按下数字或括号：　初始化，并显示数字或括号；


 


              3）按下ｃ：


                     返回初始化界面；


 


              ４）表达式存在除数为０：


　　　　　　按下等号之后，显示 Infinity；


 


              5）表达式错误：


                     按下等号之后，显示　ERROR；


              


              6）一次只能选择一个运算符号，括号不算。





                

        
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/AllinToyou/article/detail/163840
推荐阅读
相关标签
Copyright ©  2003-2013 www.wpsshop.cn  版权所有，并保留所有权利。

  
闽ICP备14008679号