1. 程式人生 > 實用技巧 >基於原生JS的簡易計算器

基於原生JS的簡易計算器

以下程式碼僅可進行加減乘除運算

js程式碼:

 1 <script type="text/javascript">
 2             var result =new Array; //用於儲存拆解後的字串以及運算結果
 3             var cache;  //暫時儲存部分運算結果
 4             function calculation(){
 5                 //將多位數(字串單個字元)轉化為整體  "5""6" ==> "56"
 6                 for(var i = 1; i < result.length; i++){
7 if(result[i] != "+" && result[i] != "-" && result[i] != "*" && result[i] != "/"){ 8 if(result[i-1] != "+" && result[i-1] != "-" && result[i-1] != "*" && result[i-1] != "/"){ 9 cache = result[i-1] + result[i]; //
合併多位數 "5""6" ==> "56" 10 result[i-1] = cache; //將整理過的數放入陣列中 11 result.splice(i,1); //整理已經整合過的數 12 calculation(); //再次呼叫自身以便檢查是否有遺漏 13 } 14 } 15 } 16 //
乘法運算 17 for(var i = 0;i < result.length;i++){ 18 if(result[i] === "*"){ 19 cache = result[i-1] * result[i+1]; 20 result[i-1] = cache; 21 result.splice(i,2); //刪掉陣列中已經運算過的數與運算子號 22 calculation(); 23 } 24 } 25 //除法運算 26 for(var i = 0;i < result.length;i++){ 27 if(result[i] === "/"){ 28 cache = result[i-1] / result[i+1]; 29 result[i-1] = cache; 30 result.splice(i,2); 31 calculation(); 32 } 33 } 34 //加法運算 35 for(var i = 0; i < result.length;i++){ 36 if(result[i] === "+"){ 37 cache = result[i-1] *1 + result[i+1] *1; //乘 1 是為了在加減法中將字元型轉為數值型運算,否則將會是級聯 38 result[i-1] = cache; 39 result.splice(i,2); 40 calculation(); 41 } 42 } 43 //減法運算 44 for(var i = 0; i < result.length;i++){ 45 if(result[i] === "-"){ 46 cache = result[i-1] * 1 - result[i+1] * 1; 47 result[i-1] = cache; 48 result.splice(i,2); 49 calculation(); 50 } 51 } 52 53 } 54 function evaluation(){ 55 //獲取輸入框中的字串(要運算的資料) 56 var inputValue = document.getElementById("input_1").value; 57 //將輸入框中的值(字串)拆解並存入陣列中 58 for(var i = 0;i < inputValue.length;i++){ 59 result.push(inputValue.charAt(i)); 60 } 61 calculation(); //呼叫運算方法 62 result[0] = result[0].toFixed(3); //保留3位小數 63 document.getElementById("box_1").innerHTML = inputValue + "=" + result[0]; 64 result = []; //歸零 65 } 66 67 </script>

html程式碼:

1 <h3>在輸入框中輸入要運算的資料,如:1+12*1/2-3</h3>
2         <input type="text" id="input_1" value="" />
3         <button type="button" onclick="evaluation()">求值</button>
4         <div class="box" id="box_1"></div>