原生JavaScript简易计算器

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;     //判断输入状态的标志
 var calcul = 0;     //判断计算状态的标志 
var quit = 0;     //防止重复按键的标志

 function command(num) {
    //获得当前显示数据
    var str = String(document.calculator.numScreen.value);
    //如果当前值不是"0"，且状态为0，则返回当前值，否则返回空值;
    str = (str != "0") ? ((operate == 0) ? str : "") : "";
    //给当前值追加字符
    str = str + String(num);
    //刷新显示
    document.calculator.numScreen.value = str;
    //重置输入状态
    operate = 0;
    //重置防止重复按键的标志
    quit = 0;
 };

function dzero() {
    var str = String(document.calculator.numScreen.value);
    //如果当前值不是"0"，且状态为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"，且状态为0，则返回当前值，否则返回"0";
    str = (str != "0") ? ((operate == 0) ? str : "0") : "0";
    //判断是否已经有一个点号
    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;
};

//清除数据
function clearscreen() {
    num = 0;
    result = 0;
    numshow = "0";
    document.calculator.numScreen.value = "0";
};

//加法
function plus() {
    //调用计算函数
    calculate();
    //更改输入状态
    operate = 1;
    //更改计算状态为加
    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);
    //判断前一个运算数是否为零以及防重复按键的状态
    if(num != 0 && quit != 1) {
        //判断要输入状态
        switch(calcul) {
            //计算"+"
            case 1:
            result = num + numshow;
            break;
            //计算"-"
            case 2:
            result = num - numshow;
            break;
            //计算乘
            case 3:
            result = num * numshow;
            break;
            //计算除
            case 4:
            //判断除数是否为 0
            if(numshow != 0) {
                result = num / numshow;
            } else {
                document.getElementById("note").innerHTML = "被除数不能为零！";
                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 = "";
};