首页 > 代码库 > 【实践】js实现简易的四则运算计算器

【实践】js实现简易的四则运算计算器

2024-08-22 00:43:49   219人阅读

 最近看了一个大神推荐的某公司面试程序员的js 面试题，题目是用js 做一个计算器于是跟着大神的思想自己做了一下

 ps：功能还没有完善好毕竟自己还是一只菜鸟还在不断学习中。

 

闲话不多说先上css代码

 

<style type="text/css">
     *{
         padding: 0px;
         margin: 0px;
         border: 0px;
     }
     .wrapper{
         border: 5px solid #000;
         width: 300px;
         height: 400px;
         margin: 0 auto;
     }
     #screen,#result{
         width: 100%;
         height: 80px;
        border:1px solid red;
    }
    .allbtn input{
       display: inline-block;
       float: left;
       width: 75px;
       height: 47px;
       border: 1px solid #ccc;
    }
    #zeroWidth{
        width: 150px;
    }
    </style>

html代码：

这里我用了input标签把每一个计算器按键都做成了按钮，当按下按钮的时候获取按钮的value值从而运行计算

id为 screen的div 是显示整个表达式的容器

id 为result 的div 是显示最后结果的容器

id为 allbtn的div 下面包裹着所有的运算符以及数字按钮

<body>
    <div class="wrapper">
      <div id="screen"></div>
      <div id="result"></div>
      <div id="allbtn" class="allbtn">
            <input type="button" name="AC" id="clearall" value="AC">
            <input type="button" id="clear" name="clear" value="C">
            <input type="button" name="yushu" value="%">
            <input type="button" class ="calc" name="chu" value="/">
            <input type="button" class="num" name="seven" value="7">
            <input type="button" class="num" name="eight" value="8">
            <input type="button" class="num" name="nine" value="9">
            <input type="button" class="calc" name="chu" name="cheng" value="*">
            <input type="button" class="num" name="four" value="4">
            <input type="button" class="num" name="five" value="5">
            <input type="button" class="num" name="six" value="6">
            <input type="button" class="calc" name="chu" name="reduce" value="-">
            <input type="button" class="num" name="one" value="1">
            <input type="button" class="num" name="two" value="2">
            <input type="button" class="num" name="three" value="3">
            <input type="button" class="calc" name="chu" name="sum" value="+">
            <input class="num" id="zeroWidth" type="button" name="zero" value="0">
            <input type="button" class="num" name="point" value=".">
            <input type="button" id="finish" name="equal" value="=">
      </div>
    </div>

 

下面是js 代码

js 代码最核心的部分就是四则运算了

<script type="text/javascript">
      window.onload = function(){
        var saveResult = new Array();//建立运算结果的数组
        var show = "";//显示屏显示的表达式
        var number = "";//定义一个临时变量 用来储存每一个整数
        var screen = document.getElementById(‘screen‘);//获取负责显示表达式的div
        var resultScreen = document.getElementById(‘result‘);//获取负责显示结果的div
          var allbtn = document.getElementById(‘allbtn‘);//获取按钮的外包裹层
          var input = allbtn.getElementsByTagName(‘input‘);//获取所有按钮
          var finish = document.getElementById(‘finish‘);//获取 "=" 按钮
          var clear = document.getElementById(‘clear‘);//获取清除按钮
          var clearall = document.getElementById(‘clearall‘);//获取 "AC" 按钮
          var numArray = new Array();//储存数字数组
          var calcArray = new Array();//储存运算符数组
        var a = 0;//循环初始化变量
        var b = 0;//循环初始化变量
        var flag = false;//判断是否按过等于符号
        

        //获取所有数字按钮
        for (var i = 0; i < input.length; i++) {
            if(input[i].className == "num"){
                numArray.push(input[i]);
            }
        }
        console.log(numArray);

        //获取所有操作符按钮
        for (var j = 0; j < input.length; j++) {
            if(input[j].className == "calc"){
                calcArray.push(input[j]);
            }
        }
        console.log(calcArray);
        //--------------------------------------准备工作完成--------------------------------------
        //
        //
        //
        //
        //--------------------------------------以下是操作部分------------------------------------------


        //数字键点击事件
        for (var x = 0; x < numArray.length; x++) {
            numArray[x].onclick = function(){
                if (flag == true) {
                    saveResult.splice(0,saveResult.length);
                    number = "";
                    show = "";
                    flag = false;
                }
                var value = http://www.mamicode.com/this.getAttribute("value");
                show += value;
                screen.innerHTML = show;
                number += value;
                console.log("点击数字的时候x的值为：" + number);
                
            }

        }
        
        //运算符点击事件
        for (var y = 0; y < calcArray.length; y++) {
            calcArray[y].onclick = function(){
                var value = http://www.mamicode.com/this.getAttribute("value");
                show += value;
                screen.innerHTML = show;
                saveResult.push(number);
                //运算符一点击x变量里面的值就会存进去数组里面
                //这样确保数字能够保持完整性
                saveResult.push(value);
                number = "";//然后清空变量number 下次再次存入数字
                console.log(saveResult);
            }
        }

        

        //等于符号点击事件
        finish.onclick = function(){
           saveResult.push(number);
           number = "";
           while(a < saveResult.length){
              

                 if(saveResult[a] == "*"){
                      var result = parseFloat(saveResult[a - 1]) * parseFloat(saveResult[a + 1]);
                      saveResult.splice(a-1,3,result);
                      a = 0;
                 }else if(saveResult[a] == "/"){
                      var result = parseFloat(saveResult[a - 1]) / parseFloat(saveResult[a + 1]);
                      saveResult.splice(a-1,3,result);
                      a = 0;
                 }
              a++;

           }

           while(b < saveResult.length){
              

                 if(saveResult[b] == "+"){
                      var result = parseFloat(saveResult[b - 1]) + parseFloat(saveResult[b + 1]);
                      saveResult.splice(b-1,3,result);
                      b = 0;
                 }else if(saveResult[b] == "-"){
                      var result = parseFloat(saveResult[b - 1]) - parseFloat(saveResult[b + 1]);
                      saveResult.splice(b-1,3,result);
                      b = 0;
                 }
              b++;

           }
           resultScreen.innerHTML = saveResult;
           flag = true;
           console.log("最终数组输出" + saveResult);
          
            
      }
      

      //AC 按钮点击事件
      clearall.onclick = function(){
          saveResult.splice(0,saveResult.length);
        number = "";
        show = "";
        screen.innerHTML = "";
      }
    }

    </script>

这里说说四则元算：

本次实现四则元素的核心是使用数组，那怎么实现呢？遍历

我这里用了while 循环当然用for 也是可以的 核心的思想是 我先遍历一次数组 如果遍历到有元素是 * 或者 / 那么我就把它所在位置的前一个元素和后一个元素执行乘或除运算（前一个元素和后一个元素要用parseFloat转型方便日后有小数点运算）然后再用splice方法，把这三个元素替换成运算后的结果，然后自增变量 a重新赋值为0，再重新执行一次遍历如此类推直到没有了 * 或 / 号

 

之后再执行第二次遍历，方法也是如此最后把数组saveResult输出到 结果div 中

【实践】js实现简易的四则运算计算器


联系
我们