<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .box{
                margin: 0 auto;
                width: 300px;
            }
            .text{
                margin: 5px;
            }
            .text input{
                width: 100%;
                height: 25px;
                text-align: right;
                font-size: 18px;
                border: 1px solid #ccc;
                border-radius: 5px;
            }
            .line{
                margin: 5px;
            }
            .line input{
                width: 23.5%;
                height: 25px;
                text-align: center;
                font-size: 18px;
                border: 1px solid #ccc;
                border-radius: 5px;
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="text"><input id="result" type="text"></div>
            <div class="line">
                <input type="button" value="7" onclick="inputNum('7')">
                <input type="button" value="8" onclick="inputNum('8')">
                <input type="button" value="9" onclick="inputNum('9')">
                <input type="button" value="/" onclick="inputNum('/')">
            </div>
            <div class="line">
                <input type="button" value="4" onclick="inputNum('4')">
                <input type="button" value="5" onclick="inputNum('5')">
                <input type="button" value="6" onclick="inputNum('6')">
                <input type="button" value="*" onclick="inputNum('*')">
            </div>
            <div class="line">
                <input type="button" value="1" onclick="inputNum('1')">
                <input type="button" value="2" onclick="inputNum('2')">
                <input type="button" value="3" onclick="inputNum('3')">
                <input type="button" value="-" onclick="inputNum('-')">
            </div>
            <div class="line">
                <input type="button" value="0" onclick="inputNum('0')">
                <input type="button" value="=" onclick="inputNum('=')">
                <input type="button" value="C" onclick="inputNum('c')">
                <input type="button" value="+" onclick="inputNum('+')">
            </div>
        </div>
        <script type="text/javascript">
            // 定义几个变量
            var op = undefined; // 保存操作符
            var result = undefined; // 保存计算的结果
            var num1 = undefined;// 记录第一个数
            function inputNum(n){
                // 判断分类
                if(n >= '0' && n <= '9'){
                    // 数字  写入输入框
                    // 根据情况判断如何输入
                    if(result != undefined){// 已经计算过了
                        // 直接覆盖
                        document.getElementById("result").value = n;
                        // 把result还原
                        result = undefined;
                    }else{
                        // 没有计算就续到后面
                        var value = document.getElementById("result").value;
                        if(value == '0'){
                            document.getElementById("result").value = n;
                        }else{
                            document.getElementById("result").value = value + n;
                        }
                    }
                }else{
                    switch(n){
                        case '+':
                            c();// 判断是否要计算,要计算就计算，如果不计算，就记录数据
                            // 记录操作符
                            op = n;
                            document.getElementById("result").value = "";
                        break;
                        case '-':
                            c();
                            op = n;
                            document.getElementById("result").value = "";
                        break;
                        case '*':
                            c();
                            op = n;
                            document.getElementById("result").value = "";
                        break;
                        case '/':
                            c();
                            op = n;
                            document.getElementById("result").value = "";
                        break;
                        case 'c':
                            document.getElementById("result").value = "";
                            // 全部还原
                            result = undefined;
                            op = undefined;
                            num1 = undefined;
                            break;
                        case '=':
                            c();
                            document.getElementById("result").value = result;
                            // 全部还原
                            result = undefined;
                            op = undefined;
                            num1 = undefined;
                            break;
                    }
                }
            }
            function c(){
                // 判断是否要做计算               
                if(num1 != undefined && op != undefined){
                    switch(op){
                        case '+':
                            result = eval(num1) + eval(document.getElementById("result").value);
                            document.getElementById("result").value=result;
                            break;
                        case '-':
                            result = eval(num1) - eval(document.getElementById("result").value);
                            document.getElementById("result").value=result;
                            break;
                        case '*':
                            result = eval(num1) * eval(document.getElementById("result").value);
                            document.getElementById("result").value=result;
                            break;
                        case '/':
                            result = eval(num1) / eval(document.getElementById("result").value);
                            document.getElementById("result").value=result;
                            break;
                    }
                    num1 = undefined;
                }else{
                    num1 = document.getElementById("result").value;
                }
            }
        </script>
    </body>
</html>