JS 实现计算器功能

	//style样式代码
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
			list-style: none;
			font-size: 20px;
		}
		
		.calculator {
			width: 326px;
			height: 460px;
			margin: 80px auto;
			background-color: #368590;
			border-radius: 5px;
			box-shadow: 0 2px 15px black;
			overflow: hidden;
		}
		
		.calculator .c_screen {
			position: relative;
			width: 326px;
			height: 110px;
			background-color: #96a4c2;
			border-radius: 5px;
			box-shadow: inherit;
		}
		
		.calculator .c_screen>p {
			position: absolute;
			top: 50%;
			margin-top: -28px;
			width: 236px;
			text-align: center;
			word-break: break-all;
			color: #fff;
			font-size: 20px;
			font-weight: bold;
			padding: 10px 45px;
		}
		
		.calculator .c_row {
			margin: 0 23px;
		}
		
		button {
			cursor: pointer;
			width: 60px;
			height: 45px;
			margin: 20px 2px 0;
			border: 0px;
			border-radius: 5px;
			color: #fff;
			background-color: #2b2f5b;
			outline: none;
		}
		
		button::selection {
			color: #fff;
		}
		
		button:active {
			box-shadow: 0 0 5px 5px dodgerblue;
		}
		
		.c_func_btn {
			background: linear-gradient(to bottom, rgba(252, 156, 23, 1) 0%, rgba(247, 126, 27, 1) 100%);
		}
		
		.d {
			width: 60px;
			height: 110px;
			float: right;
			position: relative;
			bottom: 66px;
			right: 32px;
		}
		
		.z {
			width: 129px;
			height: 45px;
		}
	</style>


//body代码

<body>
	<div class="calculator">
		<div class="c_screen">
			<p></p>
		</div>
		<div class="c_btn_wrapper">
			<div class="c_row"> <button class="c_func_btn">/</button> <button class="c_func_btn">*</button> <button class="c_func_btn">CE</button> <button class="c_func_btn">AC</button> </div>
			<div class="c_row"> <button>7</button> <button>8</button> <button>9</button> <button class="c_func_btn">+</button> </div>
			<div class="c_row"> <button>4</button> <button>5</button> <button>6</button> <button class="c_func_btn">-</button> </div>
			<div class="c_row"> <button>1</button> <button>2</button> <button>3</button> </div> <button class="c_func_btn d">=</button>
			<div class="c_row"> <button class="z">0</button> <button>.</button> </div>
		</div>
	</div>
	<script>
		var btnList = document.getElementsByTagName('button');
		var show = document.getElementsByTagName('p')[0];
		var symbolB = false; //记录符号 
		var symbol = null;
		//记录a值，b值,记录结果,保存计算结果 
		var aNum = 0,
			bNum = 0,
			result = 0,
			resultCookic = 0;
		for(var i = 0, len = btnList.length; i < len; i++) {
			btnList[i].onclick = function() {
				//结果 
				if(this.innerText == '=') {
					console.log(aNum, bNum);
					getResult(symbol, aNum, bNum);
					show.innerHTML = result;
					console.log("result" + result);
					resultCookic = result;
					result = 0;
					aNum = 0;
					bNum = 0;
					symbolB = false;
				} else {
					//初始化和归零 
					if(this.innerText == 'AC') {
						//初始化所有值 
						initAll();
						show.innerText = "";
						return;
					} else if(this.innerText == 'CE') {
						//初始化所有值 
						initAll();
						show.innerText = result;
						return;
					} else if(this.innerText == '+' || this.innerText == '-' || this.innerText == '*' || this.innerText == '/') {
						// a,b 两个数都有了但是没有计算结果而是又进行了点击
							if(bNum != 0) {
								console.log("sy: " + symbol);
								getResult(symbol, aNum, bNum);
								// 把上次计算的结果给 a
								aNum = result;
								bNum = 0;
								show.innerText = aNum;
								console.log("a: " + aNum);
								
							}
						//如果点击了符号按钮，那么之后输入的值就是b值
						//记录符号
						symbol = this.innerText;
						symbolB = true;
					} else { // 点击其他的数字按钮

						if(symbolB == false) { // 没有点击运算按钮, 记录数字 a 的值
							console.log("innerText: " + this.innerText);
							aNum += this.innerHTML;
							
							console.log("aNum: " + aNum);
							show.innerText = Number(aNum);
						} else { // 点击了运算符号

							// 计算完一次结果，再次点击符号按钮进行计算，就把上一次的计算结果赋值给a
							if(aNum == 0) {
								aNum = resultCookic;
								console.log("计算一次结果后: " + aNum);
							}
							
							bNum += this.innerText;
							console.log("bNum: " + bNum);
							show.innerText = Number(bNum);
						}
					}
				}
			}
		}
		//初始化所有值 
		function initAll() {
			result = 0;
			resultCookic = 0;
			aNum = 0;
			bNum = 0;
		}

		/**
		 * 判断符号计算结果
		 * @param {Object} symbol
		 * @param {Object} aNum
		 * @param {Object} bNum
		 */
		function getResult(symbol, aNum, bNum) {
			switch(symbol) {
				case "+":
					addition(aNum, bNum);
					break;
				case "-":
					subtraction(aNum, bNum);
					break;
				case "*":
					multiplication(aNum, bNum);
					break;
				case "/":
					division(aNum, bNum);
					break;
			}
		}
		/** * 加法
		 * @param a{number} 
		 * @param b{number} 
		 * */
		function addition(a, b) {
			result = Number(a) + Number(b);
		}

		/** * 减法
		 * * @param a{number} 
		 * * @param b{number} */
		function subtraction(a, b) {
			result = Number(a) - Number(b);
		}
		
		/** * 乘法 * @param a{number} * @param b{number} */
		function multiplication(a, b) {
			result = Number(a) * Number(b);
		}
        			
		/** * 除法 * @param a{number} * @param b{number} */
		function division(a, b) {
			result = Number(a) / Number(b);
		}
	</script>
</body>
JS 实现计算器功能

猜你喜欢
