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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
*{
    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;
 }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
/* 能实现加减乘除混合运算和归零的功能 */
/* 
   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];
   }