经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » JS/JS库/框架 » JavaScript » 查看文章
JS编写的科学计算器
来源：cnblogs　　作者：林恒　　时间：2021/1/4 9:40:00　　对本文有异议

最近半个月编写了一个JS+ＣＳＳ＋ＨＴＭＬ的网页计算器，从最初的具有简陋界面的简单计算器改版到最终具有科学／标准计算器转换功能并且界面非常友好的计算器，收获良多！总的来说，代码简单，通俗易读，下面贴上代码，供前端新手学习！欢迎提出宝贵意见，不吝指正！

 

 

 ＨＴＭＬ代码（代码中仅仅是计算器界面内容布局）：

  1. <html>
  2. <head>
  3. 	<title>计算器</title>
  4.  <link href="style.css" rel="stylesheet" type="text/css"/>
  5.   <script src="script.js"></script>
  6.  
  7. </head>
  8.  
  9. <body>
  10.  
  11. <div id="calculator">
  12. 	<a href="http://write.blog.csdn.net/postlist" id='record'>计Sweet Smile</a>
  13. 	<div class="rescult">
  14. 		<textarea type="text" id="result0" οnfοcus="this.blur();"></textarea>
  15. 		<textarea type="text" id="result" οnfοcus="this.blur();"></textarea>
  16. 	</div>
  17.  	<div>
  18. 		<section class="model-1">           <!--包含按钮的一个长形区域-->
  19. 		  <div class="checkbox"  οnclick="styleChange()">			
  20. 		  <!--包含按钮的一个较小长形区域-->
  21. 		    <input type="checkbox"/>
  22. 		    <label>科学标准</label>					<!--按钮底部的灰色滑动区-->
  23. 		  </div>
  24. 		</section>
  25. 	</div>
  26.  
  27. 	<!--标准计算器布局-->
  28.  	<div id="rows" style="display:inline;">
  29. 	<div class="row1">
  30. 		<button id="bt1" οnclick="zero()">C</button>
  31. 		<button id="bt2" οnclick="back()">DEL</button>
  32. 		<button id="bt3" οnclick="divide()">÷</button>
  33. 		<button id="bt4" οnclick="times()">×</button>
  34. 	</div>
  35. 	<div class="row2">
  36. 		<button id="bt5" οnclick="num(7)">7</button>
  37. 		<button id="bt6" οnclick="num(8)">8</button>
  38. 		<button id="bt7" οnclick="num(9)">9</button>
  39. 		<button id="bt8" οnclick="plus()">+</button>
  40. 	</div>
  41. 	<div class="row3">
  42. 		<button id="bt9" οnclick="num(4)">4</button>
  43. 		<button id="bt10" οnclick="num(5)">5</button>
  44. 		<button id="bt11" οnclick="num(6)">6</button>
  45. 		<button id="bt12" οnclick="minus()">-</button>
  46. 	</div>
  47.  
  48. 	<div id="below">
  49. 		<div id="left">
  50. 			<div class="row4">
  51. 				<button id="bt13" οnclick="num(1)">1</button>
  52. 				<button id="bt14" οnclick="num(2)">2</button>
  53. 				<button id="bt15" οnclick="num(3)">3</button>
  54. 			</div>
  55. 			<div class="row5">
  56. 				<button id="bt16" οnclick="num(0)">0</button>
  57. 				<button id="bt17" οnclick="dot()">.</button>
  58. 			</div>
  59. 		</div>
  60. 		<div id="right">
  61. 			<button id="bt18" οnclick="equal()">=</button>
  62. 		</div>
  63. 	</div>
  64.  
  65. 	</div>
  66.  
  67. 	<!--科学计算器布局-->
  68. 	<div id="sci"  style="display:none;">
  69. 		<div class="sci1">
  70. 				<button id="bt21" οnclick="zero()">C</button>
  71. 				<button id="bt22" οnclick="back()">DEL</button>
  72. 				<button id="bt23" οnclick="pow1()">^</button>
  73. 				<button id="bt24" οnclick="num('π')">π</button>
  74. 				<button id="bt25" οnclick="pow2()">√</button>
  75. 		</div>
  76. 		<div class="sci2">
  77. 				<button id="bt26" οnclick="sin()">sin</button>
  78. 				<button id="bt27" οnclick="num('(')">(</button>
  79. 				<button id="bt28" οnclick="num(')')">)</button>
  80. 				<button id="bt29" οnclick="divide1()">1/X</button>
  81. 				<button id="bt30" οnclick="divide()">÷</button>
  82. 		</div>
  83. 		<div class="sci3">
  84. 				<button id="bt31" οnclick="cos()">cos</button>
  85. 				<button id="bt32" οnclick="num(7)">7</button>
  86. 				<button id="bt33" οnclick="num(8)">8</button>
  87. 				<button id="bt34" οnclick="num(9)">9</button>
  88. 				<button id="bt35" οnclick="times()">×</button>
  89. 		</div>
  90. 		<div class="sci4">
  91. 				<button id="bt36" οnclick="tan()">tan</button>
  92. 				<button id="bt37" οnclick="num(4)">4</button>
  93. 				<button id="bt38" οnclick="num(5)">5</button>
  94. 				<button id="bt39" οnclick="num(6)">6</button>
  95. 				<button id="bt40" οnclick="minus()">-</button>
  96. 		</div>
  97. 		<div class="sci5">
  98. 				<button id="bt41" οnclick="ln()">ln</button>
  99. 				<button id="bt42" οnclick="num(1)">1</button>
  100. 				<button id="bt43" οnclick="num(2)">2</button>
  101. 				<button id="bt44" οnclick="num(3)">3</button>
  102. 				<button id="bt45" οnclick="plus()">+</button>
  103. 		</div>
  104. 		<div class="sci6">
  105. 				<button id="bt46" οnclick="log()">log</button>
  106. 				<button id="bt47" οnclick="num(0)">0</button>
  107. 				<button id="bt48" οnclick="dot()">.</button>
  108. 				<button id="bt49" οnclick="quyu()">%</button>
  109. 				<button id="bt50" οnclick="equal()">=</button>
  110. 		</div>
  111.  
  112. 	</div>
  113.  
  114. 	
  115. </div>
  116.  
  117. </body>
  118. </html>

下面是ＪＳ代码（代码语句都是非常简单的基础语法）：

  1. //改进： 定义一个变量记录“=”的输入与否而不必每输入数字时都要检索一遍文本框内容
  2.  
  3.  
  4. var status=0;	//标记所输入的是数字还是运算符号
  5. var calcu=0;	//标记所要执行的方法是哪一个
  6.  
  7.  
  8. /*数字、括号及PI的输入*/
  9. function num(x){
  10. 	var str0=document.getElementById('result0').value;
  11. 	var str=document.getElementById('result').value;
  12. 	if(str0.indexOf("=")>0){
  13. 		document.getElementById('result0').value='';
  14. 		document.getElementById('result').value='0';
  15. 		str=document.getElementById('result').value;
  16. 	}
  17. 	if(str=="0")
  18. 		str='';
  19.  	str+=String(x);
  20.  	document.getElementById('result').value=str;
  21.  	status=0;
  22. }
  23. //输入. （未做是否包含“.”的判断）
  24. function dot(){
  25. 	var str0=document.getElementById('result0').value;
  26. 	var str=document.getElementById('result').value;
  27. 	if(str0.indexOf("=")>0){
  28. 		document.getElementById('result0').value='';
  29. 		document.getElementById('result').value='0';
  30. 		str=document.getElementById('result').value;
  31. 	}
  32. 	str=str+'.';
  33.  	document.getElementById('result').value=str;
  34. }
  35.  
  36.  
  37. /*三角函数以及'1/'计算*/
  38. function sin(){
  39. 	calcu=1;
  40. 	cal();
  41. }
  42. function cos(){
  43. 	calcu=2;
  44. 	cal();
  45. }
  46. function tan(){
  47. 	calcu=3;
  48. 	cal();
  49. }
  50. function divide1(){
  51. 	calcu=4;
  52. 	cal();
  53. }
  54. function ln(){
  55. 	calcu=5;
  56. 	cal();
  57. }
  58. function log(){
  59. 	calcu=6;
  60. 	cal();
  61. }
  62. function cal(){
  63. 	var str0=document.getElementById('result0').value;
  64. 	var str=document.getElementById('result').value;
  65. 	if(str0.indexOf("=")>0){
  66. 		document.getElementById('result0').value='';
  67. 		document.getElementById('result').value='0';
  68. 		str=document.getElementById('result').value;
  69. 	}
  70. 	if(str=="0")
  71. 		str='';
  72. 	switch(calcu){                                   
  73.         case 1: str+=String("sin(");break;               
  74.         case 2: str+=String("cos(");break;               
  75.         case 3: str+=String("tan(");break; 
  76.         case 4: str+=String("1/");break;
  77.         case 5: str+=String("ln(");break;
  78.         case 6: str+=String("log(");break;
  79.     }   
  80.  	document.getElementById('result').value=str;
  81.  	status=1;
  82. }
  83.  
  84.  
  85. /*   ^、√以及%的输入   */
  86. function pow1(){
  87. 	calcu=1;
  88. 	powS();
  89. }
  90. function pow2(){
  91. 	calcu=2;
  92. 	powS();
  93. }
  94. function quyu(){
  95. 	calcu=3;
  96. 	powS();
  97. }
  98. function powS(){
  99. 	if(status == 1)
  100. 		return;
  101. 	var strpow0=document.getElementById('result0').value;
  102. 	var strpow=document.getElementById('result').value;
  103. 	if(strpow0.indexOf("=")>0){
  104. 		document.getElementById('result0').value='';
  105. 		/*document.getElementById('result').value='0';*/
  106. 		strpow=document.getElementById('result').value;
  107. 	}
  108. 	switch(calcu){
  109. 		case 1: strpow+=String('^');
  110.  			    break;
  111. 		case 2: if(strpow=='0')
  112. 			  		strpow="√";
  113. 			  	else{
  114. 			  		strpow+=String('√');
  115. 			  	}
  116. 			    break;
  117. 		case 3: strpow+=String("%");
  118. 				break;
  119. 	}
  120. 	document.getElementById('result').value=strpow;
  121. 	status=1;
  122. }
  123.  
  124.  
  125.  
  126.  
  127. /*   +-×÷ 运算   */
  128. function plus(){
  129. 	calcu=1;
  130. 	calculate();
  131. }
  132. function times(){
  133. 	calcu=2;
  134. 	calculate();
  135. }
  136. function divide(){
  137. 	calcu=3;
  138. 	calculate();		
  139. }
  140. function calculate(){
  141. 	if(status==1)
  142. 		return;
  143. 	var str0=document.getElementById('result0').value;
  144. 	var str=document.getElementById('result').value;
  145. 	if(str0.indexOf("=")>0 ){
  146. 		document.getElementById('result0').value='';
  147. 		/*document.getElementById('result').value='0';*/
  148. 		str=document.getElementById('result').value;
  149. 	}
  150. 	if(str=='')
  151. 		str='0';
  152. 	switch(calcu){
  153. 		case 1: str+='+';break;
  154. 		case 2: str+='×';break;
  155. 		case 3: str+='÷';break;
  156. 	}
  157.  	document.getElementById('result').value=str;
  158.  	status=1;
  159. }
  160. function minus(){
  161. 	var str0=document.getElementById('result0').value;
  162. 	var str=document.getElementById('result').value;
  163. 	if(str0.indexOf("=")>0){
  164. 		document.getElementById('result0').value='';
  165. 		/*document.getElementById('result').value='-';*/
  166. 		str=document.getElementById('result').value+'-';
  167. 	}
  168.  	else
  169.  		str+='-';
  170.  	document.getElementById('result').value=str;
  171. }
  172.  
  173.  
  174. //显示屏字符串为空
  175. function zero(){
  176. 	document.getElementById('result0').value="";
  177.  	document.getElementById('result').value="0";
  178. }
  179.  
  180.  
  181. //显示屏字符串减去最后一个字符
  182. function back(){
  183. 	var str0=document.getElementById('result0').value;
  184. 	var str=document.getElementById('result').value;
  185. 	if(str0.indexOf("=")>0 || str=='')
  186. 		return;
  187. 	var str1=str.substr(0,(str.length)-1)
  188.  	document.getElementById('result').value=str1;
  189. }
  190.  
  191.  
  192. //获取当前显示屏字符，判断所包含运算符，并做相关运算。
  193. function equal(){
  194. 	var str0=document.getElementById('result').value;
  195. 	if(str0=="")
  196. 		return;
  197. 	var str=str0.replace(/×/g,'*');		//用正则表达式进行全部替换
  198. 	str=str.replace(/÷/g,'/');
  199. 	str=str.replace(/π/g,'Math.PI');
  200. 	if(str.indexOf("sin")>=0){
  201. 		str=str.replace(/sin/g,'Math.round(Math.sin');
  202. 		str+='*1000000)/1000000';
  203.  
  204.  
  205. 		document.getElementById('result0').value=str0.concat("=");
  206. 		document.getElementById('result').value=eval(str);
  207. 		
  208. 	}
  209. 	else if(str.indexOf("cos")>=0){
  210. 		str=str.replace(/cos/g,'Math.round(Math.cos');
  211. 		str+='*1000000)/1000000';
  212. 		document.getElementById('result0').value=str0.concat("=");
  213. 		document.getElementById('result').value=eval(str);
  214. 	}
  215. 	else if(str.indexOf("tan")>=0){
  216. 		str=str.replace(/tan/g,'Math.round(Math.tan');
  217. 		str+='*1000000)/1000000';
  218. 		document.getElementById('result0').value=str0.concat("=");
  219. 		document.getElementById('result').value=eval(str);
  220. 	}
  221. 	else if(str.indexOf("^")>=0){
  222. 		var pos=str0.indexOf('^');
  223. 		var pow1=str0.substring(0,pos);
  224. 		var pow2=str0.substring(pos+1,str0.length+1);
  225. 		result=Math.pow(pow1, pow2);
  226. 		document.getElementById('result0').value=str0.concat("=");
  227. 		document.getElementById('result').value=eval(result);
  228. 	}
  229. 	else if(str.indexOf("√")>=0){
  230. 		var pos=str0.indexOf('√');
  231. 		var pow1=str0.substring(0,pos);
  232. 		var pow2=str0.substring(pos+1,str0.length+1);
  233. 		if(pow1==''){
  234. 			result=Math.pow(pow2,0.5);
  235. 			document.getElementById('result0').value=str0.concat("=");
  236. 			document.getElementById('result').value=eval(result);
  237. 		}
  238. 		else{
  239. 			result=Math.pow(pow2, 1/pow1);
  240. 			document.getElementById('result0').value=str0.concat("=");
  241. 			document.getElementById('result').value=eval(result);
  242. 		}
  243. 	}
  244. 	else if(str.indexOf("ln")>=0){
  245. 		var str=str0.replace(/ln/g,'Math.round(Math.log');
  246. 		str+='*1000000)/1000000';
  247. 		document.getElementById('result0').value=str0.concat("=");
  248. 		document.getElementById('result').value=eval(str);
  249. 	}
  250. 	else if(str.indexOf("log")>=0){
  251. 		var str=str0.replace(/log/g,'Math.log');
  252. 		str+= '/Math.log(10)';
  253. 		document.getElementById('result0').value=str0.concat("=");
  254. 		document.getElementById('result').value=eval(str);
  255. 	}
  256. 	else{
  257. 		result=(eval(str));
  258. 		document.getElementById('result0').value=str0.concat("=");
  259. 		document.getElementById('result').value=result;
  260. 	}
  261. 	var a=document.getElementById('result').value;
  262. 	if(a=="Infinity")
  263. 		document.getElementById('result').value='∞';
  264. 	else if(a=="-Infinity")
  265. 		document.getElementById('result').value='-∞';
  266. }
  267. function styleChange(){
  268. 	if(document.getElementById('rows').style.display=='inline'){
  269. 		document.getElementById('rows').style.display='none';
  270. 		document.getElementById('sci').style.display='inline';
  271. 	}
  272. 	else if(document.getElementById('rows').style.display=='none'){
  273. 		document.getElementById('rows').style.display='inline';
  274. 		document.getElementById('sci').style.display='none';
  275. 	}
  276. }

下面是ＣＳＳ代码（其中按钮效果部分参考了纯ＣＳＳ滑动按钮特效代码）：

  1. body { 
  2.  
  3. 	font-size:24px; 
  4. 	font-family:Arial, Georgia, "Times New Roman", Times, serif; 
  5. 	color:#555; 	
  6. 	text-align:center; 		
  7. 	background-color:#555; 		
  8. }
  9. body div{
  10. 	align:center;
  11. 	margin-top:5px;	
  12. } 
  13. #calculator{
  14. 	align:center;
  15. 	width:350px;
  16.   height:550px;
  17. 	margin:10px auto;
  18. 	border:#fff 2px solid;	
  19. 	overflow:hidden;      
  20. 	background-color:#f2f2f2; 	
  21.  
  22. }
  23.  
  24. .rescult{
  25. 	align:center;
  26. 	padding:10px 5px 0px 5px;
  27. }
  28. #result,#result0{
  29. 	width:300px;
  30. 	height:40px;
  31. 	font-size:35px;
  32. 	text-align:right;
  33. 	direction:ltr; 
  34. 	border:#C0C0C0;
  35. 	overflow:hidden;      
  36. 	background-color:#C0C0C0;
  37. 	word-wrap : normal;	
  38. }
  39. #result0{
  40.   font-size:25px;
  41. }
  42. section {
  43.   float: left;
  44.   width:100px;
  45.   padding: 0px 200px 10px 20px;
  46.   height: 50px;
  47. }
  48.  
  49. .checkbox {
  50.   position: relative;
  51.   display: inline-block;    
  52. }
  53.  
  54. .checkbox label {
  55.   font-size:20px;
  56.   text-align: center;
  57.   padding-top: 5px;
  58.   width: 90px;
  59.   height: 30px;
  60.   position: relative;
  61.   display: inline-block;
  62.   border-radius: 46px;        
  63.   -webkit-transition: 0.4s;   
  64.   transition: 0.4s;
  65. }
  66. .checkbox label:after {    
  67.   content: '';
  68.   position: absolute;
  69.   padding-top: 20px;
  70.   width: 45px;
  71.   height: 20px;
  72.   border-radius: 40%;
  73.   left: 0;                
  74.   top: -5px;
  75.   z-index: 2;       
  76.   background: #f2f2f2;   
  77.   box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);   
  78.   -webkit-transition: 0.4s;  
  79.   transition: 0.4s;
  80. }
  81. .checkbox input {
  82.   position: absolute;
  83.   left: 0;
  84.   top: 0;
  85.   width: 100%;      
  86.   height: 100%;
  87.   z-index: 5;       
  88.   opacity: 0;      
  89.   cursor: pointer;  
  90. }
  91.  
  92. .checkbox input:hover + label:after {
  93.   box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.2), 0 3px 8px 0 rgba(0, 0, 0, 0.2);
  94. }
  95. .checkbox input:checked + label:after {
  96.   left: 45px;                    
  1. }
  2. .model-1 .checkbox input:checked + label {
  3.   background:#ccc ;          
  4. }
  5. .model-1 .checkbox input:checked + label:after {
  6.   background:#f2f2f2;          
  7. }
  8.  
  9.  
  10.  
  11. #rows{
  12.   
  13. 	align:center;
  14. 	padding:0 3px;
  15.  
  16. }
  17. #below{
  18. 	margin-top:0px;
  19. 	margin-left:25px;
  20. 	margin-bottom: 30px;
  21. 	width:300px;
  22. }
  23. #left{
  24. 	margin-top:0px;
  25. 	float:left;
  26. }
  27. #right{
  28. 	margin-top:10px;
  29. 	float:right;
  30. }
  31. .row1,.row2,.row3,#below{
  32. 	align:center;	
  33. }
  34. .row3{
  35. 	margin-bottom: 0px;
  36. }
  37. #bt1,#bt2,#bt3,#bt4,#bt5,#bt6,#bt7,#bt8,#bt9,#bt10,#bt11,#bt12,#bt13,#bt14,#bt15,#bt16,#bt17,#bt18{
  38. 	font-size:18px;
  39. 	width:70px;
  40. 	height:70px;
  41. 	background-color:#eaeaea; 
  42. 	cursor:pointer;
  43.  
  44. }
  45. #bt16{
  46. 	width:145px;
  47. }
  48. #bt18{
  49. 	height:140px;
  50. }
  51. #sci{
  52.     display:none;
  53. }
  54. #sci button{
  55.   font-size:18px;
  56.   width:55px;
  57.   height:55px;
  58.   background-color:#eaeaea; 
  59.   cursor:pointer;
  60.  
  61. }
  62. #record{
  63.   float:right;
  64.   font-size:15px;
  65.   color:#555;
  66. }
  67. #record:hover{
  68.   color:red;
  69. }

转载于：https://blog.csdn.net/sweet___smile/article/details/50417211

原文链接：http://www.cnblogs.com/smileZAZ/p/14217198.html

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

JavaScript热门文章

  • echarts 饼图 + 全屏显示
  • js正则匹配以{开头,以}结尾的表达式怎么写？-附源码
  • echarts 实现数据(tooltip)自动轮播插件
  • Js设置博客园主题色(theme-color)
  • elementUI 设置input的只读或禁用的方法
  • 超级好用的流程图js框架 值得收藏
  • layui table+复杂表头+合并单元格
  • 获取地理位置
  • 如何使用JavaScript导入和导出Excel文件
  • WebStorm eslint插件报错解决 - TypeError: this.CliEngine is not a constructor

    • JavaScript推荐文章

  • 一些八股：1.fetch 的理解。2.let、const、var
  • 电子表格转身购物车：三步轻松实现
  • Canvas简历编辑器-图形绘制与状态管理(轻量级DOM)
  • IntersectionObserver + scrollIntoView 实现电梯导航 - xingba-coder
  • 可视化—gojs 超多超实用经验分享(三)
  • PixiJS源码分析系列： 第一章 从最简单的例子入手
  • WebRTC入门
  • 前端 Array.sort() 源码学习
  • 【技巧】JS代码这么写，前端小姐姐都会爱上你
  • 【JS】await异常捕获，这样做才完美

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号