Javascript计算器源码

本文介绍了一个简易计算器的设计与实现过程,包括HTML布局、JavaScript逻辑处理等关键部分。通过具体代码示例,展示了如何创建按钮响应、执行基本算术运算以及处理特殊操作如清除和小数点输入。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<FORM name="Keypad" action="">
    <TABLE>
        <B>
            <TABLE border=2 width=50 height=60 cellpadding=1 cellspacing=5>
                <TR>
                    <TD colspan=3 align=middle>
                        <input name="ReadOut" type="Text" size=24 value="0" width=100%>
                    </TD>
                    <TD>
                    </TD>
                    <TD>
                        <input name="btnClear" type="Button" value="  C  " onclick="Clear()">
                    </TD>
                    <TD><input name="btnClearEntry" type="Button" value="  CE " onclick="ClearEntry()">
                    </TD>
                </TR>
                <TR>
                    <TD>
                        <input name="btnSeven" type="Button" value="  7  " onclick="NumPressed(7)">
                    </TD>
                    <TD>
                        <input name="btnEight" type="Button" value="  8  " onclick="NumPressed(8)">
                    </TD>
                    <TD>
                        <input name="btnNine" type="Button" value="  9  " onclick="NumPressed(9)">
                    </TD>
                    <TD>
                    </TD>
                    <TD>
                        <input name="btnNeg" type="Button" value=" +/- " onclick="Neg()">
                    </TD>
                    <TD>
                        <input name="btnPercent" type="Button" value="  % " onclick="Percent()">
                    </TD>
                </TR>
                <TR>
                    <TD>
                        <input name="btnFour" type="Button" value="  4  " onclick="NumPressed(4)">
                    </TD>
                    <TD>
                        <input name="btnFive" type="Button" value="  5  " onclick="NumPressed(5)">
                    </TD>
                    <TD>
                        <input name="btnSix" type="Button" value="  6  " onclick="NumPressed(6)">
                    </TD>
                    <TD>
                    </TD>
                    <TD align=middle><input name="btnPlus" type="Button" value="  +  " onclick="Operation('+')">
                    </TD>
                    <TD align=middle><input name="btnMinus" type="Button" value="   -   " onclick="Operation('-')">
                    </TD>
                </TR>
                <TR>
                    <TD>
                        <input name="btnOne" type="Button" value="  1  " onclick="NumPressed(1)">
                    </TD>
                    <TD>
                        <input name="btnTwo" type="Button" value="  2  " onclick="NumPressed(2)">
                    </TD>
                    <TD>
                        <input name="btnThree" type="Button" value="  3  " onclick="NumPressed(3)">
                    </TD>
                    <TD>
                    </TD>
                    <TD align=middle><input name="btnMultiply" type="Button" value="  *  " onclick="Operation('*')">
                    </TD>
                    <TD align=middle><input name="btnDivide" type="Button" value="   /   " onclick="Operation('/')">
                    </TD>
                </TR>
                <TR>
                    <TD>
                        <input name="btnZero" type="Button" value="  0  " onclick="NumPressed(0)">
                    </TD>
                    <TD>
                        <input name="btnDecimal" type="Button" value="   .  " onclick="Decimal()">
                    </TD>
                    <TD colspan=3>
                    </TD>
                    <TD>
                        <input name="btnEquals" type="Button" value="  =  " onclick="Operation('=')">
                    </TD>
                </TR>
            </TABLE>
    </TABLE>
    </B>
</FORM>
</CENTER>
<SCRIPT LANGUAGE="JavaScript">
    <
    !-- Begin
    var FKeyPad = document.Keypad;
    var Accum = 0;
    var FlagNewNum = false;
    var PendingOp = "";
    function NumPressed(Num) {
        if (FlagNewNum) {
            FKeyPad.ReadOut.value = Num;
            FlagNewNum = false;
        }
        else {
            if (FKeyPad.ReadOut.value == "0")
                FKeyPad.ReadOut.value = Num;
            else
                FKeyPad.ReadOut.value += Num;
        }
    }
    function Operation(Op) {
        var Readout = FKeyPad.ReadOut.value;
        if (FlagNewNum && PendingOp != "=");
        else
        {
            FlagNewNum = true;
            if ('+' == PendingOp)
                Accum += parseFloat(Readout);
            else if ('-' == PendingOp)
                Accum -= parseFloat(Readout);
            else if ('/' == PendingOp)
                    Accum /= parseFloat(Readout);
                else if ('*' == PendingOp)
                        Accum *= parseFloat(Readout);
                    else
                        Accum = parseFloat(Readout);
            FKeyPad.ReadOut.value = Accum;
            PendingOp = Op;
        }
    }
    function Decimal() {
        var curReadOut = FKeyPad.ReadOut.value;
        if (FlagNewNum) {
            curReadOut = "0.";
            FlagNewNum = false;
        }
        else
        {
            if (curReadOut.indexOf(".") == -1)
                curReadOut += ".";
        }
        FKeyPad.ReadOut.value = curReadOut;
    }
    function ClearEntry() {
        FKeyPad.ReadOut.value = "0";
        FlagNewNum = true;
    }
    function Clear() {
        Accum = 0;
        PendingOp = "";
        ClearEntry();
    }
    function Neg() {
        FKeyPad.ReadOut.value = parseFloat(FKeyPad.ReadOut.value) * -1;
    }
    function Percent() {
        FKeyPad.ReadOut.value = (parseFloat(FKeyPad.ReadOut.value) / 100) * parseFloat(Accum);
    }
    // End -->
</SCRIPT>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值