用js 实现计算器

html

        <div class="box clearfix " id = "box0">
          <div class="shuruk"><p id="num">0</p></div>
            
            <div class="box1">
                <div class="box2">
                    <input type="button" value="C" id="c">
                    <input type="button" value="/" id="operational">
                    <input type="button" value="*" id="operational">
                    <input type="button" value="-" id="operational">       
                </div>
                <div class="box3 left">
                    <input type="button" value="7" id="numb">
                    <input type="button" value="8" id="numb">
                    <input type="button" value="9" id="numb"><br>
                    <input type="button" value="4" id="numb">
                    <input type="button" value="5" id="numb">
                    <input type="button" value="6" id="numb"><br>
                    <input type="button" value="1" id="numb">
                    <input type="button" value="2" id="numb">
                    <input type="button" value="3" id="numb"><br>
                    <input type="button" value="0" id="numb" class="box0">
                    <input type="button" value="." id="numb">
                </div>
                <div class="box4 right">
                    <input type="button" value="+" id="operational" class="boxd">
                    <input type="button" value="=" id="equal "  class="boxd">
                </div>
            </div>
        

    </div>

js

 <script>

         var box0= {
           C : "c",
           "/" :"/",
           "*":"*"  ,
           "-":"-",
           7:"7",
           8:"8",
           9:"9",
           4:"4",
           5:"5",
           6:"6",
           1:"1",
           2:"2",
           3:"3",
           0:"0",
           "." :".",
           "+" :"+",
           "=" :"="                                                                    
         }// 将按钮的value值和它所代表的值相对应起来 创建一个对象

        var table =  document.getElementById("box0") // 获取事件源
            var num = ""
        table.onclick = function(e){ // 注册事件
           
           var num1 = box0[e.target.value] // 将与box0中的对应键名的值取出
           if(num1!=undefined){// 因为单击事件是对应整个box0盒子的 所以当点击按钮之外的地方会出现undefined
                if(num1!='c'&&num1!='='){
             num+=num1
             document.getElementById("num").innerText=num
          }// 因为 c 按钮我是用来清除输入内容 等号用来输出表达式的值 所以跳过他们  
          else if(num1=="c"){
              num=0
             document.getElementById("num").innerText=num
              num="" // 如果没有这一句 在次输入时前面会带个零
          } // 当点到c按钮时 清除显示框里的值 并显示0
          else if(num1=="="){
              num=eval(num) // eval 函数 如果参数是表达式会返回表达式的值 如果参数是js语句会执行这些语句
             document.getElementById("num").innerText=num

          }// 当点到 等号时 输出值

           }
         
        }
        
    </script>