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

效果:

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

代码:

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)" />
				
				<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>

注意:

1.每次按等号要还原几个值。
2.数字转换成字符串的方法:
加一个空字符“”,例如:flag += ‘’;
3.switch函数会自动转换数字或字符(有待考证)

你可能感兴趣的:(前端,javascript,前端,css,html)