利用javaScript实现简单的计算器

来源：互联网发布：淘宝店库存软件编辑：程序博客网时间：2024/05/16 17:51

先上个效果图：

思路：使用一个total的全局变量来保存累计的结果，flagNew来标记是否是新输入的操作数，opp来存运算符

(1) function $(id) 函数返回通过id获取元素，简化以后使用document.getRlementById()

(2) function clearAll() 函数主要实现的就是让total归零，也就是C按钮的作用

(3) function enterNumber(Num) 函数用于记录输入的数，如果一直输入的是0，就显示为0，否则一直把值以字符的形式向后加

(4) function operation(op) 函数来根据opp('+'、'-'、'*'、'/')来计算值，然后更新total，并显示在界面上

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>简易的计算器</title>    <style>        body{            background-color: #99ccff;        }        table{            border-left: 1px solid #ffffff ;            border-top: 1px solid #ffffff ;        }        .inputBox{            border-top: 1px solid  #000000;            border-left: 1px solid #000000;            border-right: 1px solid #FFFFFF;            width: 180px;            background-color: #ffffff;            text-align: right;        }        input{            border-right: 1px solid #000000;            border-top: 1px solid #ffffff;            border-left: 1px solid #ffffff;            color:#000080;            background-color: #d8d8d0;            width: 40px;            height: 20px;        }        td{            border-bottom: 1px solid #fff;            border-right: 1px solid #fff;            height: 25px;        }    </style></head><body><form action="" method="get" id="myform">    <table width="180px" border="0" cellpadding="3" cellspacing="0" align="center">        <tbody>            <tr>                <td colspan="4"><input type="text" id="number" class="inputBox" value="0"/> </td>            </tr>            <tr>                <td><input type="button" value="7" onClick="enterNumber(7)" /></td>                <td><input type="button" value="8" onClick="enterNumber(8)" /></td>                <td><input type="button" value="9" onClick="enterNumber(9)" /></td>                <td><input type="button" value="+" onClick="operation('+')" /></td>            </tr>            <tr>                <td><input type="button" value="4" onClick="enterNumber(4)" /></td>                <td><input type="button" value="5" onClick="enterNumber(5)" /></td>                <td><input type="button" value="6" onClick="enterNumber(6)" /></td>                <td><input type="button" value="-" onClick="operation('-')" /></td>            </tr>            <tr>                <td><input type="button" value="1" onClick="enterNumber(1)" /></td>                <td><input type="button" value="2" onClick="enterNumber(2)" /></td>                <td><input type="button" value="3" onClick="enterNumber(3)" /></td>                <td><input type="button" value="*" onClick="operation('*')" /></td>            </tr>            <tr>                <td><input type="button" value="0" onClick="enterNumber(0)" /></td>                <td><input type="button" value="C" onClick="clearAll();" /></td>                <td><input type="button" value="/" onClick="operation('/')" /></td>                <td><input type="button" value="=" onClick="operation('=')" /></td>            </tr>        </tbody>    </table></form></body><script>    var total = 0; //全局变量total，累计输入    var flagNew = false; //是否是新的操作数（输入的第二个数）    var opp = ""; //运算符变量    function $(id){        return document.getElementById(id);    }    //清除结果    function clearAll(){        total = 0;        $("number").value = 0;    }    //数字按钮点击调用的函数，num表示输入的数字    function enterNumber(Num){        //判断是否输入新的操作数        if(flagNew){            $("number").value=Num;            flagNew = false;        }else {            if ($("number").value == "0") {                $("number").value = Num;            } else {                $("number").value += Num;            }        }        //alert( document.getElementById("number").value);    }    //“加减乘除”按钮单击调用的函数，op代表运算符号    function operation(op){        var firstNum = $("number").value;        flagNew = true;        if(opp != "=") {            //根据运算符计算            if ('+' == opp) {                total += parseFloat(firstNum);            } else if ('-' == opp) {                total -= parseFloat(firstNum);            } else if ('*' == opp) {                total *= parseFloat(firstNum);            } else if ('/' == opp) {                total /= parseFloat(firstNum);            } else {                total = parseFloat(firstNum);            }        }        opp = op; //相当于先把符号传进来，然后在下一次调用的时候再用于计算        $("number").value = total;        //alert(total);    }</script></html>

0 0