【前端】利用css实现不清除数字的计算器（起点闭关计划）

最新推荐文章于 2024-08-05 22:43:05 发布

我叫王不见

最新推荐文章于 2024-08-05 22:43:05 发布

阅读量108

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_48680173/article/details/123034441

版权

JavaScript HTML 计算器连续运算事件处理

关键词由CSDN通过智能技术生成

前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

实现一个计算器，让计算器在计算的时候能够对前面的数字进行显示

效果图：

代码实现：


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

我叫王不见

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【前端】利用css实现不清除数字的计算器（起点闭关计划）

实现一个计算器，让计算器在计算的时候能够对前面的数字进行显示效果图：代码实现：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>计算器</title> <script type="text/javascript"> // 初始状态，记得每次按等号要还原 var t1 = 0, t2 = 0, flag .
复制链接

扫一扫