文章详情页

JavaScript实现简单计算器

【字号：大中小】日期：2023-06-23 14:36:06浏览：3作者：猪猪

适合初学者参考的简易计算器，里面没有太多的难以理解的方法，使用的是最基础的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. ASP实现加法验证码2. HTML <!DOCTYPE> 标签3. html清除浮动的6种方法示例4. 存储于xml中需要的HTML转义代码5. 利用CSS3新特性创建透明边框三角6. 怎样才能用js生成xmldom对象，并且在firefox中也实现xml数据岛？7. CSS 使用Sprites技术实现圆角效果8. xpath简介_动力节点Java学院整理9. CSS可以做的几个令你叹为观止的实例分享10. HTML DOM setInterval和clearInterval方法案例详解

排行榜

					
					docker 在容器外执行某个容器内的某个命令操作
docker 查看容器日志命令的实现
H5页面使用audio标签播放音频
HTML DOM setInterval和clearInterval方法案例详解
HTML <!DOCTYPE> 标签
PHP字符串前后字符或空格删除方法介绍
html清除浮动的6种方法示例
CSS 使用Sprites技术实现圆角效果
xpath简介_动力节点Java学院整理
存储于xml中需要的HTML转义代码
Docker stop停止/remove删除所有容器
				

热门标签