适合初学者参考的简易计算器，里面没有太多的难以理解的方法，使用的是最基础的JS语法解决式子的运算问题，同时处理了式子中的运算优先级。
实现思路
1、通过绑定点击事件实现待计算式子的输入
2、遍历原式子，读取式子中乘除运算符的位置
3、优先处理乘除取余运算
4、处理加减运算
5、返回结果
代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta 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> <h2>计算器</h2> <article> </article> <article> <button>AC</button> <button>×</button> <button>%</button> <button>/</button> <button>7</button> <button>8</button> <button>9</button> <button>*</button> <button>4</button> <button>5</button> <button>6</button> <button>-</button> <button>1</button> <button>2</button> <button>3</button> <button>+</button> <button>未开发</button> <button>0</button> <button>.</button> <button>=</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 += "https://www.jb51.net/" 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)=='https://www.jb51.net/'){ 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]) == 'https://www.jb51.net/' || 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 'https://www.jb51.net/': 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 'https://www.jb51.net/': 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 'https://www.jb51.net/': 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 'https://www.jb51.net/': 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>