文章詳情頁

JavaScript實現簡單計算器

瀏覽：109日期：2023-06-23 14:36:06

適合初學者參考的簡易計算器，里面沒有太多的難以理解的方法，使用的是最基礎的JS語法解決式子的運算問題，同時處理了式子中的運算優先級。

實現思路

1、通過綁定點擊事件實現待計算式子的輸入2、遍歷原式子，讀取式子中乘除運算符的位置3、優先處理乘除取余運算4、處理加減運算5、返回結果

代碼：

<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <meta http-equiv='X-UA-Compatible' content='ie=edge'> <title>Document</title></head><body>  <style> .work2{ width: 500px; margin-top: 50px; } h2{ color: #333; } #work2Article1{ width: 100%; height: 200px; background: #cccccc; font-size: 20px; } #work2Article2{ width: 100%; height: 400px; background: #cccccc; } #work2Article2 button{ width: 24.1%; height: 20%; color: #333; background: #999; } .work2 button{ font-size: 20px; } </style> <section class='work2'> <h2>計算器</h2> <article id='work2Article1'> </article> <article id='work2Article2'> <button id='work2BtnCle'>AC</button> <button id='work2BtnDel'>×</button> <button id='work2BtnRem'>%</button> <button id='work2BtnDiv'>/</button> <button id='work2Btn7'>7</button> <button id='work2Btn8'>8</button> <button id='work2Btn9'>9</button> <button id='work2BtnMul'>*</button> <button id='work2Btn4'>4</button> <button id='work2Btn5'>5</button> <button id='work2Btn6'>6</button> <button id='work2BtnSub'>-</button> <button id='work2Btn1'>1</button> <button id='work2Btn2'>2</button> <button id='work2Btn3'>3</button> <button id='work2BtnAdd'>+</button> <button id='work2BtnNull'>未開發</button> <button id='work2Btn0'>0</button> <button id='work2BtnPoi'>.</button> <button id='work2BtnEqu'>=</button> </article> </section> <script>var num = '0'; //輸入的原式 var res = 0 ; //結果 var work2Article1 = document.getElementById(’work2Article1’); var work2BtnCle = document.getElementById(’work2BtnCle’); var work2BtnDiv = document.getElementById(’work2BtnDiv’); var work2BtnDel = document.getElementById(’work2BtnDel’); var work2BtnRem = document.getElementById(’work2BtnRem’); var work2BtnMul = document.getElementById(’work2BtnMul’); var work2BtnSub = document.getElementById(’work2BtnSub’); var work2BtnAdd = document.getElementById(’work2BtnAdd’); var work2BtnNull = document.getElementById(’work2BtnNull’); var work2BtnPoi = document.getElementById(’work2BtnPoi’); var work2BtnEqu = document.getElementById(’work2BtnEqu’);var work2Btn1 = document.getElementById(’work2Btn1’); var work2Btn2 = document.getElementById(’work2Btn2’); var work2Btn3 = document.getElementById(’work2Btn3’); var work2Btn4 = document.getElementById(’work2Btn4’); var work2Btn5 = document.getElementById(’work2Btn5’); var work2Btn6 = document.getElementById(’work2Btn6’); var work2Btn7 = document.getElementById(’work2Btn7’); var work2Btn8 = document.getElementById(’work2Btn8’); var work2Btn9 = document.getElementById(’work2Btn9’); var work2Btn0 = document.getElementById(’work2Btn0’);// 初始化 work2BtnCle.onclick = function () { num = '0' ; work2Article1.innerText=`${num}`; } work2BtnDel.onclick = function () { // 判斷原式長度，長度為1時變為0 if(num.length==1){num = ’0’ ;work2Article1.innerText=num;// 否則減去最后一位 }else{num = num.substring(0,num.length-1);work2Article1.innerText=num; } } // 運算符點擊事件 work2BtnDiv.onclick = function () { num += '/' work2Article1.innerText=num; } work2BtnRem.onclick = function () { num += '%' ; work2Article1.innerText=`${num}`; } work2BtnMul.onclick = function () { num += '*' ; work2Article1.innerText=`${num}`; } work2BtnAdd.onclick = function () { num += '+' ; work2Article1.innerText=`${num}`; } work2BtnNull.onclick = function () { alert(’下次一定開發出來’); } work2BtnPoi.onclick = function () { num += '.' ; work2Article1.innerText=`${num}`; } work2BtnSub.onclick = function () { num += '-' ; work2Article1.innerText=`${num}`; } // 數字點擊事件 work2Btn1.onclick =function(){ if( num == '0' ){num = '1'; }else{num += '1' ; } work2Article1.innerText=`${num}`; } work2Btn2.onclick =function(){ if( num == '0' ){num = '2'; }else{num += '2' ; } work2Article1.innerText=`${num}`; } work2Btn3.onclick =function(){ if( num == '0' ){num = '3'; }else{num += '3' ; } work2Article1.innerText=`${num}`; } work2Btn4.onclick =function(){ if( num == '0' ){num = '4'; }else{num += '4' ; } work2Article1.innerText=`${num}`; } work2Btn5.onclick =function(){ if( num == '0' ){num = '5'; }else{num += '5' ; } work2Article1.innerText=`${num}`; } work2Btn6.onclick =function(){ if( num == '0' ){num = '6'; }else{num += '6' ; } work2Article1.innerText=`${num}`; } work2Btn7.onclick =function(){ if( num == '0' ){num = '7'; }else{num += '7' ; } work2Article1.innerText=`${num}`; } work2Btn8.onclick =function(){ if( num == '0' ){num = '8'; }else{num += '8' ; } work2Article1.innerText=`${num}`; } work2Btn9.onclick =function(){ if( num == '0' ){num = '9'; }else{num += '9' ; } work2Article1.innerText=`${num}`; } work2Btn0.onclick =function(){ if( num == '0' ){num = '0'; }else{num += '0' ; } work2Article1.innerText=`${num}`; }work2BtnEqu.onclick = function () { // num = Number(num); //檢測運算符號的位置 function obtainSymbol(){var num1 = [];var o = 0 ;for(var i = 0 ; i<=num.length ; i++){ if(num.charAt(i)==’+’){ num1[o] = i ; o++; }else if(num.charAt(i)==’-’){ num1[o] = i ; o++; }else if(num.charAt(i)==’*’){ num1[o] = i ; o++; }else if(num.charAt(i)==’/’){ num1[o] = i ; o++; }else if(num.charAt(i)==’%’){ num1[o] = i ; o++; }}return num1 ; } var res1 = 0 ; //計算結果 var numStar = num ; //重新獲取原式子 // 檢測乘除取余運算 var num1 = obtainSymbol(); console.log(num1); // 檢測除了第一個符號之外的乘除取余運算 for( var w = 0 ; w <= num1.length ; w++ ){if(w != 0){ if( num.charAt(num1[w]) == ’*’ || num.charAt(num1[w]) == ’/’ || num.charAt(num1[w]) == ’%’ ){ if(w != num1.length-1){ switch(num.charAt(num1[w])){ case ’*’: var l =Number(num.substring(num1[w-1],num1[w]))*Number(num.substring(num1[w]+1,num1[w+1])) ; console.log(l); num = num.substring(0,num1[w-1]+1) + l + num.substring(num1[w+1]) ; break; case ’/’: var l =Number(num.substring(num1[w-1],num1[w]))*Number(num.substring(num1[w]+1,num1[w+1])) ; num = num.substring(0,num1[w-1]+1) + l + num.substring(num1[w+1]) ; break; case ’%’: var l =Number(num.substring(num1[w-1],num1[w]))*Number(num.substring(num1[w]+1,num1[w+1])) ; num = num.substring(0,num1[w-1]+1) + l + num.substring(num1[w+1]) ; break; } }else if(w == num1.length-1 ){ switch(num.charAt(num1[w])){ case ’*’: var l =Number(num.substring(num1[w-1]+1,num1[w])) * Number(num.substring(num1[w]+1)) ; num = num.substring(0,num1[w-1]+1) + l ; break; case ’/’: var l =Number(num.substring(num1[w-1]+1,num1[w])) / Number(num.substring(num1[w]+1)) ; num = num.substring(0,num1[w-1]+1) + l ; break; case ’%’: var l =Number(num.substring(num1[w-1]+1,num1[w])) % Number(num.substring(num1[w]+1)) ; num = num.substring(0,num1[w-1]+1) + l; break; } } num1 = 0 ; num1 = obtainSymbol(); w -= 1; }} } // 從第一位運算符開始運算 for(var k = 0 ; k < num1.length ; k++){if(k==0){ switch(num.charAt(num1[k])){ case ’+’: res1 += Number(num.substring(0,num1[k])) + Number(num.substring(num1[k]+1,num1[k+1])) ; break; case ’-’: res1 += Number(num.substring(0,num1[k])) - Number(num.substring(num1[k]+1,num1[k+1])) ; break; case ’*’: res1 += Number(num.substring(0,num1[k])) * Number(num.substring(num1[k]+1,num1[k+1])) ; break; case ’/’: res1 += Number(num.substring(0,num1[k])) / Number(num.substring(num1[k]+1,num1[k+1])) ; break; case ’%’: res1 += Number(num.substring(0,num1[k])) % Number(num.substring(num1[k]+1,num1[k+1])) ; break; }}else{ switch(num.charAt(num1[k])){ case ’+’: if(k==num1.length-1){ res1 += Number(num.substring(num1[k]+1)) ; }else{res1 += Number(num.substring(num1[k]+1,num1[k+1])); }break; case ’-’: if(k==num1.length-1){ res1 -= Number(num.substring(num1[k]+1)) ; }else{res1 -= Number(num.substring(num1[k]+1,num1[k+1])); }break; case ’*’: if(k==num1.length-1){ res1 *= Number(num.substring(num1[k]+1)) ; }else{res1 *= Number(num.substring(num1[k]+1,num1[k+1])); }break; case ’/’: if(k==num1.length-1){ res1 /= Number(num.substring(num1[k]+1)) ; }else{res1 /= Number(num.substring(num1[k]+1,num1[k+1])); }break; case ’%’: if(k==num1.length-1){ res1 %= Number(num.substring(num1[k]+1)) ; }else{res1 %= Number(num.substring(num1[k]+1,num1[k+1])); }break; } } }work2Article1.innerText=`${numStar}=${res1}`; } </script></body></html>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。

JavaScript

上一條：javascript實現滾動條效果下一條：JavaScript寫個貪吃蛇小游戲(超詳細)

相關文章：

1. 使用Python webdriver圖書館搶座自動預約的正確方法2. IntelliJ IDEA設置自動提示功能快捷鍵的方法3. android H5本地緩存加載優化的實戰4. PHP如何開啟Opcache功能提升程序處理效率5. SpringBoot整合Redis的步驟6. Python3 json模塊之編碼解碼方法講解7. 從Python的字符串中剝離所有非數字字符（“。”除外）8. PHP程序員簡單的開展服務治理架構操作詳解(二)9. 詳解如何使用Net將HTML簡歷導出為PDF格式10. ASP.NET MVC使用jQuery ui的progressbar實現進度條

排行榜

					
					使用Python webdriver圖書館搶座自動預約的正確方法
IntelliJ IDEA設置自動提示功能快捷鍵的方法
android H5本地緩存加載優化的實戰
ASP.NET MVC使用jQuery ui的progressbar實現進度條
詳解如何使用Net將HTML簡歷導出為PDF格式
從Python的字符串中剝離所有非數字字符（“。”除外）
IDEA一鍵完成格式化、去除無用引用、編譯的操作
PHP程序員簡單的開展服務治理架構操作詳解(二)
PHP如何開啟Opcache功能提升程序處理效率
SpringBoot整合Redis的步驟
Python3 json模塊之編碼解碼方法講解
				