HTML部分代碼：

<div id="calculator">
    <div id="calcu-head">
        <h6>簡單的計算器</h6>
    </div>
    <form name="calculator" action="" method="get">
        <div id="calcu-screen">
            <!--
                配置顯示窗口，使用onfocus="this.blur();"避免鍵盤輸入
            -->
            <input type="text" name="numScreen" class="screen" value="0" onfocus="this.blur();" />
        </div>
        <div id="calcu-btn">
            <ul>
                <!--
                    配置按鈕
                -->
                <li onclick="command(7)">7</li>
                <li onclick="command(8)">8</li>
                <li onclick="command(9)">9</li>
                <li class="tool" onclick="del()">←</li>
                <li class="tool" onclick="clearscreen()">C</li>
                <li onclick="command(4)">4</li>
                <li onclick="command(5)">5</li>
                <li onclick="command(6)">6</li>
                <li class="tool" onclick="times()">×</li>
                <li class="tool" onclick="divide()">÷</li>
                <li onclick="command(1)">1</li>            <li onclick="command(2)">2</li>
                <li onclick="command(3)">3</li>
                <li class="tool" onclick="plus()">+</li>
                <li class="tool" onclick="minus()">-</li>
                <li onclick="command(0)">0</li>
                <li onclick="dzero()">00</li>
                <li onclick="dot()">.</li>
                <li class="tool" onclick="persent()">%</li>
                <li class="tool" onclick="equal()">=</li>
            </ul>
        </div>
        <div id="calcu-foot">
            <span class="welcome">歡迎使用javascript計算器！</span>
        </div>
    </form>
</div>

CSS部分代碼：

body {
    font-size: 12px;
    font-family: Arial, Georgia, "Times New Roman", Times, serif;
    color: #555;
    text-align: center;
    background-color: #e2e2e2;
}
h6 {
    margin: 0;
    font-size: 12px;
}
#calculator {
    width: 240px;
    height: auto;
    overflow: hidden;
    margin: 10px auto;
    border: #fff 1px solid;
    padding-bottom: 10px;
    background-color: #f2f2f2;
}
#calculator div {
    clear: both;
}
#calculator ul {
    padding: 0;
    margin: 5px 14px;
    border: #fff 1px solid;
    height: auto;
    overflow: hidden;
}
#calculator li {
    list-style: none;
    float: left;
    width: 32px;
    height: 32px;
    margin: 5px;
    display: inline;
    line-height: 32px;
    font-size: 14px;
    background-color: #eaeaea;
}
#calculator li.tool {
    background-color: #e2e2e2;
}
#calculator li:hover {
    background-color: #f9f9f9;
    cursor: pointer;
}
#calculator li:active {
    background-color: #fc0;
    cursor: pointer;
}
#calculator li.tool:active {
    background-color: #d8e8ff;
    cursor: pointer;
}
#calcu-head {
    text-align: left;
    padding: 10px 15px 5px;
}
.screen {
    width: 200px;
    height: 24px;
    line-height: 24px;
    padding: 4px;
    border: #e6e6e6 1px solid;
    border-bottom: #f2f2f2 1px solid;
    border-right: #f2f2f2 1px solid;
    margin: 10px auto;
    direction: ltr;
    text-align: right;
    font-size: 16px;
    color: #999;
}
#calcu-foot {
    text-align: left;
    padding: 10px 15px 5px;
    height: auto;
    overflow: hidden;
}
span#note {
    float: left;
    width: 210px;
    height: auto;
    overflow: hidden;
    color: red;
}
span.welcome {
    clear: both;
    color: #999;
}

JavaScript部分代碼：

var num = 0;
var result = 0;
var numshow = "0";
var operate = 0;     //判斷輸入狀態(tài)的標志
 var calcul = 0;     //判斷計算狀態(tài)的標志 
var quit = 0;     //防止重復按鍵的標志

 function command(num) {
    //獲得當前顯示數(shù)據(jù)
    var str = String(document.calculator.numScreen.value);
    //如果當前值不是"0"，且狀態(tài)為0，則返回當前值，否則返回空值;
    str = (str != "0") ? ((operate == 0) ? str : "") : "";
    //給當前值追加字符
    str = str + String(num);
    //刷新顯示
    document.calculator.numScreen.value = str;
    //重置輸入狀態(tài)
    operate = 0;
    //重置防止重復按鍵的標志
    quit = 0;
 };

function dzero() {
    var str = String(document.calculator.numScreen.value);
    //如果當前值不是"0"，且狀態(tài)為0，則返回當str+"00"，否則返回"0";
    str = (str != "0") ? ((operate == 0) ? str + "00" : "0") : "0";
    document.calculator.numScreen.value = str;
    operate = 0;
};

function dot() {
    var str = String(document.calculator.numScreen.value);
    //如果當前值不是"0"，且狀態(tài)為0，則返回當前值，否則返回"0";
    str = (str != "0") ? ((operate == 0) ? str : "0") : "0";
    //判斷是否已經(jīng)有一個點號
    for(i = 0; i <= str.length; i++) {
         //如果有則不再插入
        if(str.substr(i, 1) == "."){
            return false;
        };
    };
    str = str + ".";
    document.calculator.numScreen.value = str;
    operate = 0;
};

//退格
function del() {
    var str = String(document.calculator.numScreen.value);
    str = (str != "0") ? str : "";
    str = str.substr(0, str.length - 1);
    str = (str != "") ? str : "0";
    document.calculator.numScreen.value = str;
};

//清除數(shù)據(jù)
function clearscreen() {
    num = 0;
    result = 0;
    numshow = "0";
    document.calculator.numScreen.value = "0";
};

//加法
function plus() {
    //調(diào)用計算函數(shù)
    calculate();
    //更改輸入狀態(tài)
    operate = 1;
    //更改計算狀態(tài)為加
    calcul = 1; 
};

//減法
function minus() {
    calculate();
    operate = 1;
    calcul = 2;
};

//乘法
function times() {
    calculate();
    operate = 1;
    calcul = 3;
};

//除法function divide() {
    calculate();
    operate = 1;
    calcul = 4;
};

//求余
function persent() {
    calculate();
    operate = 1;
    calcul = 5;
};

//等于
function equal() {
    calculate();
    operate = 1;
    num = 0;
    result = 0;
    numshow = "0";
};

function calculate() {
    numshow = Number(document.calculator.numScreen.value);
    //判斷前一個運算數(shù)是否為零以及防重復按鍵的狀態(tài)
    if(num != 0 && quit != 1) {
        //判斷要輸入狀態(tài)
        switch(calcul) {
            //計算"+"
            case 1:
            result = num + numshow;
            break;
            //計算"-"
            case 2:
            result = num - numshow;
            break;
            //計算乘
            case 3:
            result = num * numshow;
            break;
            //計算除
            case 4:
            //判斷除數(shù)是否為 0
            if(numshow != 0) {
                result = num / numshow;
            } else {
                document.getElementById("note").innerHTML = "被除數(shù)不能為零！";
                setTimeout(clearnote, 4000);
            };
            break;
            case 5:
            result = num % numshow;
            break;
        };
        //避免重復按鍵
        quit = 1;
    } else {
        result = numshow;
    };
    numshow = String(result);
    document.calculator.numScreen.value = numshow;
    num = result;        //存儲當前值 
};

//清空提示
function clearnote() {
    document.getElementById("note").innerHTML = "";
};