1.html

<div class="counter">
            <input type="text" id="text1"/>
            <div id="box">
                <input type="button" value="1" id="btn1" />
                <input type="button" value="2" id="btn2" />
                <input type="button" value="3" id="btn3" />
                <input type="button" value="+" id="jia" /><br />
                <input type="button" value="4" id="btn4" />
                <input type="button" value="5" id="btn5" />
                <input type="button" value="6" id="btn6" />
                <input type="button" value="-" id="jian" /><br />
                <input type="button" value="7" id="btn7" />
                <input type="button" value="8" id="btn8" />
                <input type="button" value="9" id="btn9" />
                <input type="button" value="*" id="cheng" /><br />
                <input type="button" value="0" id="btn0" />
                <input type="button" value="." id="btnd" />
                <input type="button" value="/" id="chu" /><br />
            </div>
            <input type="button" value="=" id="zong" />
            <input type="button" value="C" id="clert" />
            <input type="button" value="Off/no" id="switch" />
        </div>

2.css

     .counter{
                width: 180px;
                border: 1px solid silver;
                text-align: center;
                margin: 50px auto;
            }
            .counter input{
                height: 25px;
                margin: 3px 0;
                width: 40px;
            }
            #text1{
                width: 170px;
                text-align: right;
            }
            #box>#chu,#switch{
                width: 84px;
            }

3.js

//第一步
        //得到計算器的顯示屏
        var text1 = document.getElementById('text1');
        
        //得到計算器的輸入按鈕（不是所有的按鈕）
        var box = document.getElementById('box');
        
        //得到等于按鈕
        var zong = document.getElementById('zong');
        
        //得到清除按鈕
        var clert = document.getElementById('clert');
        
        
        //第二步
        //點擊界面的輸入按鈕
        box.onclick = function(ev) {
            //兼容IE
            var e = event || ev;
            var t = e.srcElement || e.target;
            //判斷點擊的值是不是空的
            if(t.value == undefined) {
                //如果是空的什么也不做
            } else {
                //如果不是就把它的值顯示在計算器的顯示屏上
                text1.value += t.value;
            }
        }
        
        //第三步
        //點擊等于按鈕
        zong.onclick = function() {
            //判斷顯示屏的內容不為空的時候執行
            if(text1.value != "")
            //計算出里面輸入的運算并顯示出來
            //eval()函數可計算某個字符串，并執行其中的的 JavaScript 代碼
                text1.value = eval(text1.value);
        }
        
        //第四步
        //點擊清除按鈕
        clert.onclick = function() {
            //清空顯示屏
            text1.value = ""
        }