最近看了一個大神推薦的某公司面試程序員的js 面試題，題目是用js 做一個計算器於是跟着大神的思想自己做了一下
ps：功能還沒有完善好畢竟自己還是一只菜鳥還在不斷學習中。
閑話不多說先上css代碼
<style type="text/css"> *{ padding: 0px; margin: 0px; border: 0px; } .wrapper{ border: 5px solid #000; width: 300px; height: 400px; margin: 0 auto; } #screen,#result{ width: 100%; height: 80px; border:1px solid red; } .allbtn input{ display: inline-block; float: left; width: 75px; height: 47px; border: 1px solid #ccc; } #zeroWidth{ width: 150px; } </style>
html代碼：
這里我用了input標簽把每一個計算器按鍵都做成了按鈕，當按下按鈕的時候獲取按鈕的value值從而運行計算
id為 screen的div 是顯示整個表達式的容器
id 為result 的div 是顯示最后結果的容器
id為 allbtn的div 下面包裹着所有的運算符以及數字按鈕
<body> <div class="wrapper"> <div id="screen"></div> <div id="result"></div> <div id="allbtn" class="allbtn"> <input type="button" name="AC" id="clearall" value="AC"> <input type="button" id="clear" name="clear" value="C"> <input type="button" name="yushu" value="%"> <input type="button" class ="calc" name="chu" value="/"> <input type="button" class="num" name="seven" value="7"> <input type="button" class="num" name="eight" value="8"> <input type="button" class="num" name="nine" value="9"> <input type="button" class="calc" name="chu" name="cheng" value="*"> <input type="button" class="num" name="four" value="4"> <input type="button" class="num" name="five" value="5"> <input type="button" class="num" name="six" value="6"> <input type="button" class="calc" name="chu" name="reduce" value="-"> <input type="button" class="num" name="one" value="1"> <input type="button" class="num" name="two" value="2"> <input type="button" class="num" name="three" value="3"> <input type="button" class="calc" name="chu" name="sum" value="+"> <input class="num" id="zeroWidth" type="button" name="zero" value="0"> <input type="button" class="num" name="point" value="."> <input type="button" id="finish" name="equal" value="="> </div> </div>
下面是js 代碼
js 代碼最核心的部分就是四則運算了
<script type="text/javascript"> window.onload = function(){ var saveResult = new Array();//建立運算結果的數組 var show = "";//顯示屏顯示的表達式 var number = "";//定義一個臨時變量 用來儲存每一個整數 var screen = document.getElementById('screen');//獲取負責顯示表達式的div var resultScreen = document.getElementById('result');//獲取負責顯示結果的div var allbtn = document.getElementById('allbtn');//獲取按鈕的外包裹層 var input = allbtn.getElementsByTagName('input');//獲取所有按鈕 var finish = document.getElementById('finish');//獲取 "=" 按鈕 var clear = document.getElementById('clear');//獲取清除按鈕 var clearall = document.getElementById('clearall');//獲取 "AC" 按鈕 var numArray = new Array();//儲存數字數組 var calcArray = new Array();//儲存運算符數組 var a = 0;//循環初始化變量 var b = 0;//循環初始化變量 var flag = false;//判斷是否按過等於符號 //獲取所有數字按鈕 for (var i = 0; i < input.length; i++) { if(input[i].className == "num"){ numArray.push(input[i]); } } console.log(numArray); //獲取所有操作符按鈕 for (var j = 0; j < input.length; j++) { if(input[j].className == "calc"){ calcArray.push(input[j]); } } console.log(calcArray); //--------------------------------------准備工作完成-------------------------------------- // // // // //--------------------------------------以下是操作部分------------------------------------------ //數字鍵點擊事件 for (var x = 0; x < numArray.length; x++) { numArray[x].onclick = function(){ if (flag == true) { saveResult.splice(0,saveResult.length); number = ""; show = ""; flag = false; } var value = this.getAttribute("value"); show += value; screen.innerHTML = show; number += value; console.log("點擊數字的時候x的值為：" + number); } } //運算符點擊事件 for (var y = 0; y < calcArray.length; y++) { calcArray[y].onclick = function(){ var value = this.getAttribute("value"); show += value; screen.innerHTML = show; saveResult.push(number); //運算符一點擊x變量里面的值就會存進去數組里面 //這樣確保數字能夠保持完整性 saveResult.push(value); number = "";//然后清空變量number 下次再次存入數字 console.log(saveResult); } } //等於符號點擊事件 finish.onclick = function(){ saveResult.push(number); number = ""; while(a < saveResult.length){ if(saveResult[a] == "*"){ var result = parseFloat(saveResult[a - 1]) * parseFloat(saveResult[a + 1]); saveResult.splice(a-1,3,result); a = 0; }else if(saveResult[a] == "/"){ var result = parseFloat(saveResult[a - 1]) / parseFloat(saveResult[a + 1]); saveResult.splice(a-1,3,result); a = 0; } a++; } while(b < saveResult.length){ if(saveResult[b] == "+"){ var result = parseFloat(saveResult[b - 1]) + parseFloat(saveResult[b + 1]); saveResult.splice(b-1,3,result); b = 0; }else if(saveResult[b] == "-"){ var result = parseFloat(saveResult[b - 1]) - parseFloat(saveResult[b + 1]); saveResult.splice(b-1,3,result); b = 0; } b++; } resultScreen.innerHTML = saveResult; flag = true; console.log("最終數組輸出" + saveResult); } //AC 按鈕點擊事件 clearall.onclick = function(){ saveResult.splice(0,saveResult.length); number = ""; show = ""; screen.innerHTML = ""; } } </script>
這里說說四則元算：
本次實現四則元素的核心是使用數組，那怎么實現呢？遍歷
我這里用了while 循環當然用for 也是可以的 核心的思想是 我先遍歷一次數組 如果遍歷到有元素是 * 或者 / 那么我就把它所在位置的前一個元素和后一個元素執行乘或除運算（前一個元素和后一個元素要用parseFloat轉型方便日后有小數點運算）然后再用splice方法，把這三個元素替換成運算后的結果，然后自增變量 a重新賦值為0，再重新執行一次遍歷如此類推直到沒有了 * 或 / 號
之后再執行第二次遍歷，方法也是如此最后把數組saveResult輸出到 結果div 中