轉自：https://mp.weixin.qq.com/s/Jxe3V7D0PFLvIFNZPlSyNg

 <table>
      <tr>
          <td colspan="4"><input class="txt" type="text" disabled/></td>
      </tr>
      <tr>
          <td colspan="2"><input class="btn_click" type="button" value="AC"/></
 
td>
          <td colspan="2"><input class="btn_click"  type="button" value="DEL"/></td>
      </tr>
      <tr>
          <td><input class="btn" type="button" value="7"/></td>
          <td><input class="btn" type="button" value="8"/></
 
td>
          <td><input class="btn" type="button" value="9"/></td>
          <td><input class="btn" type="button" value="*"/></td>

      </tr>
      <tr>
          <td><input class="btn" type="button" value="4"/></td>
          <
 
td><input class="btn" type="button" value="5"/></td>
          <td><input class="btn" type="button" value="6"/></td>
          <td><input class="btn" type="button" value="/"/></td>

      </tr>
      <tr>
          <td><input class="btn" type="button" value="1"/></td>
          <td><input class="btn" type="button" value="2"/></td>
          <td><input class="btn" type="button" value="3"/></td>
          <td><input class="btn" type="button" value="-"/></td>

      </tr>
      <tr>
          <td><input class="btn" type="button" value="0"/></td>
          <td><input class="btn" type="button" value="."/></td>
          <td><input class="btn" type="button" value="+"/></td>
          <td><input class="btn" type="button" value="="/></td>

      </tr>

</table>

<style>
        table{            border-collapse: collapse;            margin: auto auto;
        }        td{            width: 150px;            line-height: 70px;
        }        .btn{            width: 150px;            line-height: 70px;            font-size: x-large;
        }        .btn_click{            width: 302px;            line-height: 70px;            font-size: x-large;
        }        .txt{            width: 600px;            line-height: 100px;            font-size: x-large;text-align: right;
        }    </style>

<script>    /*在網頁載入時  給按鈕新增點選事件*/
    window.onload = function () {        //定義陣列  來接收使用者按的數字和計算符號
        var way_res = [];        //獲取按鈕物件
        var btn_txt = document.getElementsByClassName("btn");        //獲取螢幕元素
        var txt = document.getElementsByClassName("txt")[0];        //獲取清空按鈕和退格按鈕
        var btn_way = document.getElementsByClassName("btn_click");        for (var i = 0; i < btn_way.length; i++) {
            btn_way[i].onclick = function () {                //判斷按鈕
                if (this.value == "AC") {
                    way_res = [];
                    txt.value = "";
                }                else {                    /* substr() 截斷字串 1.從那個位置開始   2.擷取多少長度*/
                    txt.value = txt.value.substr(0, txt.value.length - 1);
                }
            }
        }        //給btn_txt  陣列物件新增事件
        for (var i = 0; i < btn_txt.length; i++) {
            btn_txt[i].onclick = function () {                /* this 指代的是當前事件的執行物件*/
                /*按完鍵將值傳給螢幕*/
                /*判斷是否為數字*/
                if (txt.value == "" && this.value == ".") {
                    txt.value = "0.";
                }                else {                    if (!isNaN(this.value) || this.value == ".") {                        /*使用者輸入的是數字或者點的情況*/
                        /*indexOf() 用來查詢字元  如果有返回當前位置  如果沒有返回-1*/
                        if (txt.value.indexOf(".") != -1) {                            /*有點存在的情況*/
                            if (this.value != ".") {                                /*當前按得不是點，進行拼接*/
                                txt.value += this.value;
                            }
                        }                        else {                            /*沒點存在直接拼接*/
                            txt.value += this.value;
                        }
                    }                    else {                        /*是符號的情況*/
                        //先存值  在清屏
                        if (this.value != "=") {                            /*是符號但不為等號的情況*/
                            way_res[way_res.length] = txt.value;                            //存符號
                            way_res[way_res.length] = this.value;                            //清屏
                            txt.value = "";
                        }                        else {                            /*是等號的情況*/
                            way_res[way_res.length] = txt.value;                            //eval()方法   專門用來計算表示式的值
                            txt.value = eval(way_res.join(""));                            //計算完成之後將陣列清空
                            way_res = [];
                        }
                    }
                }
            }
        }
    }
</script>