实现加减乘除混合运算和归零功能的计算器

h5 部分代码：

<div class="main">
    简易计算
    <div class="calculater">
        <table>
            <tr>
                <td colspan="4"><input type="text" name="content" id="content" placeholder="0" disabled="false"></td>
            </tr>
            <tr>
                 <td><button >7</button></td>
                 <td><button >8</button></td>
                 <td><button >9</button></td>
                 <td><button >+</button></td>
            </tr>
            <tr>
                 <td><button>4</button></td>
                 <td><button>5</button></td>
                 <td><button>6</button></td>
                 <td><button>-</button></td>
            </tr>
            <tr>
                 <td><button>1</button></td>
                 <td><button>2</button></td>
                 <td><button>3</button></td>
                 <td><button>*</button></td>
            </tr>
            <tr>
                 <td><button>0</button></td>
                 <td><button>C</button></td>
                 <td><button>=</button></td>
                 <td><button>/</button></td>
            </tr>
        </table>
        <span></span>
    </div>
</div>

css代码

*{
    padding: 0;
    margin: 0;
 }

 .main{
     border: 5px solid rgb(148, 0, 50);
     background: rgb(153, 51, 153);
     width: 500px;
     height: 500px;
     margin: 0 auto;
     padding: 10px;
     color: rgb(248, 51, 91);
     font-size: 15px;
 }
 .calculater{
     font-size: 5px;     
     text-align: center;
     width: 300px;
     height: 300px;
     margin: 0 auto;
  }
 .calculater table{
     display: inline-block;
     vertical-align:middle;
 }
 .calculater span{
     display: inline-block;
     height: 100%;
     width: 0;
     vertical-align: middle;
 }
 .calculater table input{
     width: 208px;
     border: 2px solid rgb(66, 0, 22);
     text-align: right;
     padding: 5px;
 }
 .calculater table button{
     color: #fff;
     width: 50px;
     height: 30px;
     border: 2px solid rgb(66, 0, 22);
     background: brown;
 }
 .calculater table button:hover{
     cursor: pointer;
 }
 .calculater button span{
     display: inline;
 }

js 

/* 能实现加减乘除混合运算和归零的功能 */
/* 
   1、按下任意字母，Input 里的内容都会累加（不能被点击）(事件冒泡捕获)
   2、按下C 会清空
   3、按下 "=" 求和，字符串分割
*/
   var content=document.querySelector("#content");
   var buttons=document.querySelectorAll("button");
   var table=document.querySelector("table");
   var flag=true;                              // 开关，当上次结果没有清空时，自动进入清空，并显示输入按钮
   table.onclick=function(ev){
       var ev=ev || window.event;  
       var target=ev.target || window.srcElement;
       var inner=target.innerHTML;

       if(target.nodeName=="BUTTON"){  // 按下按钮
            if((/[d]/.test(inner) || inner=="+" || inner=="-" || inner=="*" || inner=="/") && flag){
                 content.value+=inner;              
            }else if(inner=="C" || !flag){
                 flag=true;
                 content.value=inner=="C"?"":inner;
            }else{                  // "="
                 calculate();
            }
        }
    }
    function calculate(){
        flag=false;
        var number=content.value.match(/[d]+/g);
        var sig=content.value.match(/[D]+/g);
        for(var i=0;i<number.length;i++){
             number[i]=Number(number[i]);
        }
        while(sig.indexOf("*")!=-1 || sig.indexOf("/")!=-1){        // 优先计算 * 和 /
             var a=sig.indexOf("*");
             var b=sig.indexOf("/")
             var before=a>b?b==-1?a:b:a==-1?b:a;     // 从左往右，顺位
             if(sig[before]=="*"){
                  number[before]=number[before]*number[before+1];
             }else{
                  number[before]=number[before]/number[before+1];                    
             }
             number.splice(before+1,1);  // number 中两个数发生关系，删掉后面那个数，splice 会自动调整下标位置
             sig.splice(before,1);   // 同理 ~
        }
        while(sig.length>0){
             if(sig[0]=="+"){
                  number[0]=number[0]+number[1];
             }else{
                  number[0]=number[0]-number[1];                    
             }
             number.splice(1,1);  
             sig.splice(0,1);
        }
        content.value=number[0];
   }

最后

以上就是传统万宝路为你收集整理的实现加减乘除混合运算和归零功能的计算器的全部内容，希望文章能够帮你解决实现加减乘除混合运算和归零功能的计算器所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。