JS 實現計算器功能
阿新 • • 發佈：2018-12-12
//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>