calculator-and-guessing-code
/
calculator.html

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <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>
</head>

<body>
    <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>

    <script>
        window.onload = function () {
            var way_res = [];
            var btn = 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 {
                        txt.value = txt.value.substr(0, txt.value.length - 1);
                    }
                }
            }
            for (var i = 0; i < btn.length; i++) {
                btn[i].onclick = function () {
                    if (txt.value == "" && this.value == "." || txt.value == "" && this.value == "0") {
                        txt.value = "0.";
                    }
                    else {
                        if (!isNaN(this.value) || this.value == ".") {                             //是数字或者点

                            if (txt.value.indexOf(".") != -1) {                                     //有点存在的情况
                                if (this.value != ".") {                                                     //当前按得不是点，进行拼接
                                    txt.value += this.value;
                                    //不能写btn[i].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;
                                txt.value = eval(way_res.join(""));

                                way_res = [];
                            }
                        }
                    }
                }
            }
        }
    </script>


    <h1><a href="index.html">猜数游戏</a></h1>
</body>

</html>