文章詳情頁

JavaScript實(shí)現(xiàn)簡(jiǎn)單計(jì)算器

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

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

實(shí)現(xiàn)思路

1、通過綁定點(diǎn)擊事件實(shí)現(xiàn)待計(jì)算式子的輸入2、遍歷原式子，讀取式子中乘除運(yùn)算符的位置3、優(yōu)先處理乘除取余運(yùn)算4、處理加減運(yùn)算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>計(jì)算器</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 () { // 判斷原式長(zhǎng)度，長(zhǎng)度為1時(shí)變?yōu)? if(num.length==1){num = ’0’ ;work2Article1.innerText=num;// 否則減去最后一位 }else{num = num.substring(0,num.length-1);work2Article1.innerText=num; } } // 運(yùn)算符點(diǎn)擊事件 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ù)字點(diǎn)擊事件 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); //檢測(cè)運(yùn)算符號(hào)的位置 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 ; //計(jì)算結(jié)果 var numStar = num ; //重新獲取原式子 // 檢測(cè)乘除取余運(yùn)算 var num1 = obtainSymbol(); console.log(num1); // 檢測(cè)除了第一個(gè)符號(hào)之外的乘除取余運(yùn)算 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; }} } // 從第一位運(yùn)算符開始運(yùn)算 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>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。

JavaScript

上一條：javascript實(shí)現(xiàn)滾動(dòng)條效果下一條：JavaScript寫個(gè)貪吃蛇小游戲(超詳細(xì))

相關(guān)文章：

1. xml創(chuàng)建節(jié)點(diǎn)(根節(jié)點(diǎn)、子節(jié)點(diǎn))2. ASP.NET MVC使用jQuery ui的progressbar實(shí)現(xiàn)進(jìn)度條3. Spring監(jiān)聽器及定時(shí)任務(wù)實(shí)現(xiàn)方法詳解4. php中數(shù)組最簡(jiǎn)單的使用方法5. android實(shí)現(xiàn)打地鼠游戲6. Spring Boot 在啟動(dòng)時(shí)進(jìn)行配置文件加解密的方法詳解7. Python基礎(chǔ)之numpy庫的使用8. java 實(shí)現(xiàn)Comparable接口排序,升序、降序、倒敘9. PHP json_encode中文亂碼解決方法10. 關(guān)于Python Socket編程的要點(diǎn)詳解

排行榜

					
					ASP.NET MVC使用jQuery ui的progressbar實(shí)現(xiàn)進(jìn)度條
xml創(chuàng)建節(jié)點(diǎn)(根節(jié)點(diǎn)、子節(jié)點(diǎn))
關(guān)于Python Socket編程的要點(diǎn)詳解
基于Django集成CAS實(shí)現(xiàn)流程詳解
Spring Boot 在啟動(dòng)時(shí)進(jìn)行配置文件加解密的方法詳解
PHP json_encode中文亂碼解決方法
php中數(shù)組最簡(jiǎn)單的使用方法
java 實(shí)現(xiàn)Comparable接口排序,升序、降序、倒敘
android實(shí)現(xiàn)打地鼠游戲
Spring監(jiān)聽器及定時(shí)任務(wù)實(shí)現(xiàn)方法詳解
Python基礎(chǔ)之numpy庫的使用
				