文章詳情頁

JavaScript實現簡單計算器

瀏覽：42日期：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 讀txt文件,按‘,’分割每行數據操作2. Java Media Framework 基礎教程3. Python 忽略文件名編碼的方法4. JavaEE SpringMyBatis是什么? 它和Hibernate的區別及如何配置MyBatis5. 解決vue頁面刷新，數據丟失的問題6. android studio實現簡單的計算器（無bug）7. 在Mac中配置Python虛擬環境過程解析8. python如何實現word批量轉HTML9. 利用單元測試對PHP代碼進行檢查10. python爬蟲實戰之制作屬于自己的一個IP代理模塊

排行榜

					
					Java Media Framework 基礎教程
JavaEE SpringMyBatis是什么? 它和Hibernate的區別及如何配置MyBatis
Python 忽略文件名編碼的方法
python 讀txt文件,按‘,’分割每行數據操作
android studio實現簡單的計算器（無bug）
解決vue頁面刷新，數據丟失的問題
在Mac中配置Python虛擬環境過程解析
python如何實現word批量轉HTML
利用單元測試對PHP代碼進行檢查
python爬蟲實戰之制作屬于自己的一個IP代理模塊
python3實現往mysql中插入datetime類型的數據
				