JavaScript:简单计算器的实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			input {
				width: 500px;
				height: 70px;
				font-size: 45px;
				border: none;
			}

			tr {
				text-align: center;
				font-size: 40px;
				color: blue;
			}

			td:hover {
				cursor: pointer;
				background: skyblue;
			}
		</style>
	</head>
	<body>
		<div id="" align="center">
			<input type="" name="" value="0" disabled="disabled" id="showNum" />
			<table border="1" cellspacing="0" height="600px" width="500px">
				<tr>
					<td id="clear">C</td>
					<td id="del">退格</td>
					<td>%</td>
					<td class="ope">/</td>
				</tr>
				<tr>
					<td class="num">7</td>
					<td class="num">8</td>
					<td class="num">9</td>
					<td class="ope">*</td>
				</tr>
				<tr>
					<td class="num">4</td>
					<td class="num">5</td>
					<td class="num">6</td>
					<td class="ope">-</td>
				</tr>
				<tr>
					<td class="num">1</td>
					<td class="num">2</td>
					<td class="num">3</td>
					<td class="ope">+</td>
				</tr>
				<tr>
					<td colspan="2" class="num">0</td>

					<td class="num">.</td>
					<td id="result">=</td>
				</tr>
			</table>
		</div>

	</body>
</html>
<script type="text/javascript">
	//1.把数字和小数点归为一类  class="num"
	//2.把运算符归为一类 class=opr
	//3.等号,归零 退格 显示框  单独添加id
	//4.把所有要用的DOM对象获取出来
	//做运算:简单的运算,1+2=3  我们得定义三个变量 来保存这个三个数据 第一个数 第二个数 运算符
	var numValue1 = '';
	var numValue2 = '';
	var operator = '';

	var showNum = document.getElementById("showNum");
	var clear = document.getElementById("clear");
	var del = document.getElementById("del");
	var result = document.getElementById("result");

	//把所有的数字获取出来
	var nums = document.getElementsByClassName("num");
	//给所有的数字添加点击事件
	for (var i = 0; i < nums.length; i++) {
		nums[i].onclick = function() {
			//判断用户是否在点击小数点
			if (this.innerText == '.') {
				if (numValue1.indexOf(".") == -1 && numValue1.length >= 1) {
					//没有小数点
					//获取用户点击的数字
					numValue1 += this.innerText;
					//把用户点击的数字展示出来
					showNum.value = numValue1;
				} else {
					//
				}
			} else {
				//nums[i].innerText
				//showNum.value+=this.innerText;
				//获取用户点击的数字
				numValue1 += this.innerText;
				//把用户点击的数字展示出来
				showNum.value = numValue1;
			}
		}
	}


	//当用户点击了 运算符之后,把第一个数给第二个数,把第一个数清空,用来接收第二个数字

	//获取所有的运算符,绑定点击事件
	var opes = document.getElementsByClassName("ope");
	for (var i = 0; i < opes.length; i++) {
		opes[i].onclick = function() {
			//判断用户可能点=或四则
			if (numValue2 == '') {
				//alert(this.innerText);
				//保存用户点击的运算符
				//operator = this.innerText;
				//把第一个数给第二个数
				numValue2 = numValue1;
				//把第一个数清空,用来接收下一次用户的输入
				numValue1 = '';
			} else {
				//点=和或四则
				//operator = this.innerText;
				if (numValue1 != '') {
					funResult();
				}

			}


			//保存用户点击的运算符
			operator = this.innerText;

		}
	}


	//归零
	clear.onclick = function() {

		numValue1 = '';
		numValue2 = '';
		operator = '';
		showNum.value = '0';
	}

	//退格
	del.onclick = function() {
		if (numValue1.length > 1) {
			numValue1 = numValue1.substring(0, numValue1.length - 1);
			showNum.value = numValue1;
		} else if (numValue1.length == 1) {
			numValue1 = '';
			showNum.value = '0';
		}

	}

	//给等号绑定点击事件
	result.onclick = function() {
		//进行运算
		if (numValue2 != '') {
			funResult();
		}

	}

	//  numValue1='0';  numValue2='0';
	function funResult() {
		//转换类型
		var one = Number(numValue2);
		var two = Number(numValue1);
		var r = 0;
		switch (operator) {
			case '+':
				r = one + two;
				break
			case '-':
				r = one - two;
				break
			case '*':
				r = one * two;
				break
			case '/':
				if (two == 0) {
					alert("除数不能为0");
					numValue1 = '';
					numValue2 = '';
					operator = '';
					r = 0;
				} else {
					r = one / two;
				}


				break
		}
		//把上一次的结果算出来,赋值给numValue2
		numValue2 = r;
		把第一个数清空,用来接收下一次用户的输入
		numValue1 = '';
		showNum.value = numValue2.toFixed(5) * 1; //可以去掉无效的0
	}
</script>

效果如图:
JavaScript:简单计算器的实现

上一篇:JavaScript中的innerHTML,innerHTML,value属性


下一篇:JavaScript中的innerHTML,innerHTML,value属性