首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

JavaScript实现简单计算器

Posted in Javascript onMarch 19, 2020

适合初学者参考的简易计算器，里面没有太多的难以理解的方法，使用的是最基础的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实现简单计算器

- Author -

皮卡皮卡?

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
XMLHTTP 乱码的解决方法（UTF8,GB2312 编码 解码）
Jan 12 Javascript
JavaScript自定义事件介绍
Aug 29 Javascript
根据身份证号自动输出相关信息(籍贯,出身日期,性别)
Nov 15 Javascript
js实现遮罩层弹出框的方法
Jan 15 Javascript
JavaScript 常见安全漏洞和自动化检测技术
Aug 21 Javascript
详解React Native 采用Fetch方式发送跨域POST请求
Nov 15 Javascript
vscode 开发Vue项目的方法步骤
Nov 25 Javascript
element-ui组件中input等的change事件中传递自定义参数
May 22 Javascript
详解ES6 export default 和 import语句中的解构赋值
May 28 Javascript
Angular 中使用 FineReport不显示报表直接打印预览
Aug 21 Javascript
手把手带你入门微信小程序新框架Kbone的使用
Feb 25 Javascript
vue实例的选项总结
Jun 09 Javascript
jQuery实现颜色打字机的完整代码
Mar 19 #jQuery
webpack 动态批量加载文件的实现方法
Mar 19 #Javascript
vue-cli3项目升级到vue-cli4 的方法总结
Mar 19 #Javascript
js实现经典贪吃蛇小游戏
Mar 19 #Javascript
javascrpt密码强度校验函数详解
Mar 18 #Javascript
Node.js Domain 模块实例详解
Mar 18 #Javascript
js判断密码强度的方法
Mar 18 #Javascript
React(6) GTX1660(1) 对讲机(1) ICOM(2) 胆机(1) DE1102(1) R71E(1) i5 9400(1) i7 6700(1) R72E(1)
You might like
浅谈使用PHP开发微信支付的流程
2015/10/04 PHP
javascript 写类方式之二
2009/07/05 Javascript
javascript在事件监听方面的兼容性小结
2010/04/07 Javascript
JQuery从头学起第一讲
2010/07/04 Javascript
使用jspdf生成pdf报表
2015/07/03 Javascript
Angularjs在初始化未完毕时出现闪烁问题的解决方法分析
2016/08/05 Javascript
AngularJS $injector 依赖注入详解
2016/09/14 Javascript
jQuery实现移动端手机商城购物车功能
2016/09/24 Javascript
JS组件系列之MVVM组件 vue 30分钟搞定前端增删改查
2017/04/28 Javascript
jQuery使用zTree插件实现可拖拽的树示例
2017/09/23 jQuery
微信小程序wx.request实现后台数据交互功能分析
2017/11/25 Javascript
Vue实现导出excel表格功能
2018/03/30 Javascript
js如何找出字符串中的最长回文串
2018/06/04 Javascript
vue2.0 + ele的循环表单及验证字段方法
2018/09/18 Javascript
vue-router beforeEach跳转路由验证用户登录状态
2018/12/26 Javascript
jQuery 筛选器简单操作示例
2019/10/02 jQuery
ES6中new Function()语法及应用实例分析
2020/02/19 Javascript
vue单应用在ios系统中实现微信分享功能操作
2020/09/07 Javascript
微信小程序实现页面左右滑动
2020/11/16 Javascript
layui使用及简单的三级联动实现教程
2020/12/01 Javascript
对vue生命周期的深入理解
2020/12/03 Vue.js
[43:47]完美世界DOTA2联赛PWL S3 LBZS vs Phoenix 第一场 12.09
2020/12/11 DOTA
Python 登录网站详解及实例
2017/04/11 Python
python素数筛选法浅析
2018/03/19 Python
python DataFrame 修改列的顺序实例
2018/04/10 Python
Python高级property属性用法实例分析
2019/11/19 Python
Python创建一个元素都为0的列表实例
2019/11/28 Python
python输入一个水仙花数(三位数) 输出百位十位个位实例
2020/05/03 Python
Alba Moda德国网上商店：意大利时尚女装销售
2016/11/14 全球购物
Aosom西班牙：家具在线商店
2020/06/11 全球购物
财务会计专业应届毕业生求职信
2013/10/18 职场文书
《小池塘》教学反思
2014/02/28 职场文书
学习保证书范文
2014/04/30 职场文书
法学专业大学生实习自我鉴定
2014/10/05 职场文书
在Django中使用MQTT的方法
2021/05/10 Python
MySQL的安装与配置详细教程
2021/06/26 MySQL