【前端】【HTML+CSS+JavaScript(JS)】简易计算器的实现可连加连减带注释/总结

最新推荐文章于 2023-03-13 17:00:23 发布

_小鹰

最新推荐文章于 2023-03-13 17:00:23 发布

阅读量1k

点赞数 2

分类专栏：前端文章标签： javascript 前端 css html

本文链接：https://blog.csdn.net/cc2855816075/article/details/122896468

版权

前端专栏收录该内容

38 篇文章 1 订阅

订阅专栏

本文详细介绍了如何使用HTML和JavaScript实现一个简单的计算器，支持基本的加减乘除，以及连续运算和清零功能。代码展示了如何处理输入、运算状态切换和结果显示，特别强调了按等号后需要还原的值和数字转字符串技巧。

摘要由CSDN通过智能技术生成

效果：

在这里插入图片描述

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计算器</title>
		<script type="text/javascript">
		
			//	初始状态，记得每次按等号要还原
			var t1 = 0, t2 = 0, flag = 0;	//初始0 加法1 减法2 乘法3 除法4
			
			var equal_times = 0;
			
			function cal(n){	//传参 n
				
				if(n != 'C')
					document.getElementById("txt-1").value += n;	//直接展示，因为都要展示，但是C除外
				
				if(n >= 0 && n <= 9){	//如果n是数字
					//还未敲操作数分支
					if(flag >= 1 && flag <= 4){	//意为：如果已经敲了+-*/后再敲数字，就可以取t2了
						t2 = t2 * 10 + parseInt(n);	//得到t2
					}
				}
				else{	//如果n不是数字
					switch(n){
						case 'C':	//还原 
							document.getElementById("txt-1").value = "";
							//★★★★★★★★★★★这个equal_times也要归位！！！★★★★★★★★★★
							t1 = t2 = flag = equal_times = 0;
							break;
							
							
						case '+':
							t1 = parseInt(document.getElementById("txt-1").value);	//得到t1
							flag = 1;	//表明是加法
							break;
						case '-':
							t1 = parseInt(document.getElementById("txt-1").value);
							flag = 2;
							break;
						case '*':
							t1 = parseInt(document.getElementById("txt-1").value);
							flag = 3;
							break;
						case '÷':
							t1 = parseInt(document.getElementById("txt-1").value);
							flag = 4;
							break;
							
							
						case '=':
							//检查这是第几次等于
							++equal_times;
							// 	★★★数字加空串变字符串★★★
							// flag += '';
							//如果下面是 case '1' 时就需要修改。case 1 这样是数字
							switch(flag){
								case 1:
								//只要不是第一次等于。t1就等于原来两数相加，。即可实现连加。
									if(equal_times > 1)
											t1 += t2;
									document.getElementById("txt-1").value += t1 + t2;
									break;
								case 2:
									if(equal_times > 1)
											t1 -= t2;
									document.getElementById("txt-1").value += t1 - t2;
									break;
								case 3:
									if(equal_times > 1)
											t1 *= t2;
									document.getElementById("txt-1").value += t1 * t2;
									break;
								case 4:
									if(equal_times > 1)
											t1 /= t2;
									document.getElementById("txt-1").value += t1 / t2;
									break;
							}
							//要连等于的话，以下变量无法归位，因为如果要归位，t1，t2，flag数据就丢失了。
							// t1 = t2 = flag = 0;	//flag归位，操作数归位
							break;
					}
				}
			}
			
		</script>
		
		<style type="text/css">
			#b-box{
				width: 300px;
				margin:150px auto;
			}
			.line input{
				width: 60px;
				height: 30px;
			}
			div{
				margin-top: 15px;
			}
		</style>
		
	</head>
	<body>
		<div id="b-box">
			<div id="tt"><label>计算器</label></div>
			<div id="txt"><input type="text" id="txt-1" /></div>
			<div class="line">
				<input type="button" value="7" onclick="cal(7)" />
				<!-- 经过测试cal(7)和cal('7')都可以，因为★★★判断★★★的时候自动转换 -->
				<input type="button" value="8" onclick="cal(8)" />
				<input type="button" value="9" onclick="cal(9)" />
				<input type="button" value="+" onclick="cal('+')" />
			</div>
			
			<div class="line">
				<input type="button" value="4" onclick="cal(4)" />
				<input type="button" value="5" onclick="cal(5)" />
				<input type="button" value="6" onclick="cal(6)" />
				<input type="button" value="-" onclick="cal('-')" />
			</div>
			
			<div class="line">
				<input type="button" value="1" onclick="cal(1)" />
				<input type="button" value="2" onclick="cal(2)" />
				<input type="button" value="3" onclick="cal(3)" />
				<input type="button" value="*" onclick="cal('*')" />
			</div>
			
			<div class="line">
				<input type="button" value="C" onclick="cal('C')" />
				<input type="button" value="0" onclick="cal(0)" />
				<input type="button" value="=" onclick="cal('=')" />
				<input type="button" value="÷" onclick="cal('÷')" />
			</div>
			
		</div>
	</body>
</html>