文章詳情頁

JavaScript實現(xiàn)簡單計算器

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

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

實現(xiàn)思路

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

代碼：

<!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'>未開發(fā)</button> <button id='work2Btn0'>0</button> <button id='work2BtnPoi'>.</button> <button id='work2BtnEqu'>=</button> </article> </section> <script>var num = '0'; //輸入的原式 var res = 0 ; //結(jié)果 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時變?yōu)? 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(’下次一定開發(fā)出來’); } work2BtnPoi.onclick = function () { num += '.' ; work2Article1.innerText=`${num}`; } work2BtnSub.onclick = function () { num += '-' ; work2Article1.innerText=`${num}`; } // 數(shù)字點擊事件 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 ; //計算結(jié)果 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>

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

JavaScript

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

相關(guān)文章：

1. IntelliJ IDEA導入jar包的方法2. Docker容器如何更新打包并上傳到阿里云3. Docker 容器健康檢查機制4. 使用 kind 和 Docker 啟動本地的 Kubernetes環(huán)境5. vue+elementUI下拉框回顯問題及解決方式6. 淺談JavaScript宏任務(wù)和微任務(wù)執(zhí)行順序7. idea環(huán)境下Maven無法正常下載pom中配置的包問題8. IntelliJ IDEA調(diào)整字體大小的方法9. IntelliJ IDEA配置Tomcat服務(wù)器的方法10. Python幾種常見算法匯總

排行榜

					
					idea環(huán)境下Maven無法正常下載pom中配置的包問題
Docker容器如何更新打包并上傳到阿里云
vue+elementUI下拉框回顯問題及解決方式
IntelliJ IDEA調(diào)整字體大小的方法
IntelliJ IDEA導入jar包的方法
使用 kind 和 Docker 啟動本地的 Kubernetes環(huán)境
淺談JavaScript宏任務(wù)和微任務(wù)執(zhí)行順序
Docker 容器健康檢查機制
IntelliJ IDEA配置Tomcat服務(wù)器的方法
Python幾種常見算法匯總
idea刪除項目的操作方法
				