怎么用JavaScript编写计算器？

  请问各位大虾，如何用JavaScript编写计算器， 左边是普通计算器进行“+ - * /”，右边是科学计算器，
强力党请现身啊   小弟在这先谢谢咯！

解决方案 »

  1.   

    <html>
    <head>
    <title>A Simple Calculator</title>
    <script type="text/javascript">
    <!--
    var ifNumEnd = false;
    var num1;
    var num2;
    var operation="";
    var ifOpEnd = false;
    var ifEqual = false;
    var ifOp = false;//this function is used to initialize all variables.
    function resetAll()
    {
    ifNumEnd = false;
    num1=0;
    num2=0;
    operation="";
    ifOpEnd = false;
    ifEqual = false;
    ifOp = false;
    calculator.result.value="0";
    }//this function is used to enter numbers in the text.If the number is 0,then clear 0 and enter another number as character,so does the last calculation is finished.
    function getNum(Num)
    {
    if (ifNumEnd==true)
    {calculator.result.value=Num;
    ifNumEnd=false;
    }
    else
    {
    if (calculator.result.value=="0")
    {
    calculator.result.value=Num;}
    else
    {calculator.result.value+=Num;}
    }
    ifOp=true;
    }
    //this function is used to enter ".".If the last calculation is finished,enter "0.",and if not,add "." as character.If "." is already exit,do nothing.
    function enterpoint()
    {
    var result=calculator.result.value;
     if (ifNumEnd==true) {
      result = "0.";
      ifNumEnd = false;
       }
     else
     {
      if (result.indexOf(".") == -1)
       result += ".";
       }
     calculator.result.value=result;
    }//this function is used to take negation of the value in text area.
    function negi()
    {
    var num=parseFloat(calculator.result.value);
    num=-1*num;
    calculator.result.value=num;
    }//this function is used to get operation and play operation.
    //ifOpEnd is used to dicide if the value should be num1 or num2 , If num1=undefine or equals() has been run,ifOpEnd =true.
    //ifOp is used to dicide if the operation should be run,without ifOp,If num1=num2=2,the first time you press "*" num1=4,num2=2,the second time num1=16,num2=4.It will be wrong.
    function getOperation(Op)
    {
    if (ifOp==true)
    {
    ifOp=false;
    ifEqual=false;
    if (ifOpEnd==false)
    {num1=parseFloat(calculator.result.value);
    ifOpEnd = true;
    ifNumEnd = true;
    }
    else
    {
    num2=parseFloat(calculator.result.value);
    ifNumEnd = true;
    if (operation!="")
    {
    runOp(operation);
    operation=Op;
    }
    }
    operation=Op;
    }
    else
    {
    operation=Op;
    }
    }//Get the result.If equals() have already run a time,then without ifEqual as switch,it will run the second time.such as 1+2=3,3+2=5,it will be wrong.
    function equals()
    {
    if (ifEqual == false)
    {
    num2=parseFloat(calculator.result.value);
    runOp(operation);
    ifEqual=true;
    }
    calculator.result.value=num1;
    ifOp=true;
    ifOpEnd=false;
    ifNumEnd=true;
    }
    //the function run add,subtract,multiply,divide and get remainder by select out the integer section of the float.
    function runOp(operation)
    {
    switch (operation)
    {
    case 1:
    num1=accAdd(num1,num2);
    break;
    case 2:
    num1=accSub(num1,num2);
    break;
    case 3:
    num1=accMul(num1,num2);
    break;
    case 4:
    num1=accDiv(num1,num2);
    break;
    case 5:
    num1=Math.floor(num1);
    num2=Math.floor(num2);
    var num=Math.floor(num1/num2);
    num1=num1-num*num2;
    break;
    default:
    break;}
    }//this function is used to delet the value in text area.
    function deletVal()
    {
    calculator.result.value="0";
    ifNumEnd=true;}//This function is used to close window.
    function exitWindow()
    {
    close();}//Since the operation of float cannot reach high precise,such as 1.1*1.1=1.210000000001,I cite the code from the website:http://hi.baidu.com/skyeah/blog/item/756ab6fbf8100f2b4f4aeac5.html
    function accDiv(arg1, arg2) {
        var t1 = 0, t2 = 0, r1, r2;
        try { t1 = arg1.toString().split(".")[1].length } catch (e) { }
        try { t2 = arg2.toString().split(".")[1].length } catch (e) { }
        with (Math) {
            r1 = Number(arg1.toString().replace(".", ""))
            r2 = Number(arg2.toString().replace(".", ""))
            return (r1 / r2) * pow(10, t2 - t1);
        }
    } 
    Number.prototype.div = function(arg) {
        return accDiv(this, arg);
    } 
    function accMul(arg1, arg2) {
        var m = 0, s1 = arg1.toString(), s2 = arg2.toString();
        try { m += s1.split(".")[1].length } catch (e) { }
        try { m += s2.split(".")[1].length } catch (e) { }
        return Number(s1.replace(".", "")) * Number(s2.replace(".", "")) / Math.pow(10, m)
    } 
    Number.prototype.mul = function(arg) {
        return accMul(arg, this);
    } 
    function accAdd(arg1, arg2) {
        var r1, r2, m;
        try { r1 = arg1.toString().split(".")[1].length } catch (e) { r1 = 0 }
        try { r2 = arg2.toString().split(".")[1].length } catch (e) { r2 = 0 }
        m = Math.pow(10, Math.max(r1, r2))
        return (arg1 * m + arg2 * m) / m
    }
    Number.prototype.add = function(arg) {
        return accAdd(arg, this);
    }
    function accSub(arg1, arg2) {
        var r1, r2, m, n;
        try { r1 = arg1.toString().split(".")[1].length } catch (e) { r1 = 0 }
        try { r2 = arg2.toString().split(".")[1].length } catch (e) { r2 = 0 }
        m = Math.pow(10, Math.max(r1, r2));
        n = (r1 >= r2) ? r1 : r2;
        return ((arg1 * m - arg2 * m) / m).toFixed(n);
    }
    Number.prototype.sub = function(arg) {
        return accSub(arg, this);
    }//-->
    </script>
    </head>
    <body>
    <form name="calculator" action="">
    <div align="center">
    <table border="1" width="500" height="140" bgcolor="#C0C0C0">
    <tr>
    <td colspan="3"><input name="result" type="text" value="0" style="width:310" disabled="true">　</td>
    <td>　</td>
    <td><input name="delet" type="button" value="CE" onclick="deletVal()" style="width:100">　</td>
    <td><input name="reset" type="button" value="C" onclick="resetAll()" style="width:100">　</td>
    </tr>
    <tr>
    <td><input name="1" type="button" value="1" onclick="getNum(1)" style="width:100">　</td>
    <td><input name="2" type="button" value="2" onclick="getNum(2)" style="width:100">　</td>
    <td><input name="3" type="button" value="3" onclick="getNum(3)" style="width:100">　</td>
    <td>　</td>
    <td><input name="inverse" type="button" value="+/-" onclick="negi()" style="width:100">　</td>
    <td><input name="proportion" type="button" value="%" onclick="getOperation(5)" style="width:100">　</td>
    </tr>
    <tr>
    <td><input name="4" type="button" value="4" onclick="getNum(4)" style="width:100">　</td>
    <td><input name="5" type="button" value="5" onclick="getNum(5)" style="width:100">　</td>
    <td><input name="6" type="button" value="6" onclick="getNum(6)" style="width:100">　</td>
    <td>　</td>
    <td><input name="add" type="button" value="+" onclick="getOperation(1)" style="width:100">　</td>
    <td><input name="subtract" type="button" value="-" onclick="getOperation(2)" style="width:100">　</td>
    </tr>
    <tr>
    <td><input name="7" type="button" value="7" onclick="getNum(7)" style="width:100">　</td>
    <td><input name="8" type="button" value="8" onclick="getNum(8)" style="width:100">　</td>
    <td><input name="9" type="button" value="9" onclick="getNum(9)" style="width:100">　</td>
    <td>　</td>
    <td><input name="multiply" type="button" value="*" onclick="getOperation(3)" style="width:100">　</td>
    <td><input name="divide" type="button" value="/" onclick="getOperation(4)" style="width:100">　</td>
    </tr>
    <tr>
    <td><input name="0" type="button" value="0" onclick="getNum(0)" style="width:100">　</td>
    <td><input name="point" type="button" value="." onclick="enterpoint()" style="width:100">　</td>
    <td>　</td>
    <td>　</td>
    <td><input name="equal" type="button" value="=" onclick="equals()" style="width:100">　</td>
    <td><input name="exit" type="button" value="exit" onclick="exitWindow()" style="width:100">　</td>
    </tr>
    </table>
    </div>
    </form>
    </body>
    </html>上个月老师留的作业，做得不太好，但BUG比较少，用起来也没问题。
      

  2.   


    <HTML>
    <HEAD>
    <META http-equiv="Content-Type" content="text/html; charset=gb2312">
    <TITLE>简易计算器</TITLE>
    <STYLE type="text/css">
    body{background-color:#99CCFF;}
    table{border-left:1 #FFFFFF solid;border-top:1 #FFFFFF solid;}
    .input1{BORDER-RIGHT: #FFFFFF 1px solid; BORDER-TOP: #000000 1px solid; BORDER-LEFT: #000000 1px solid;BORDER-BOTTOM: #FFFFFF 1px solid;width:180px;BACKGROUND-COLOR:#FFFFFF;text-align:right;}
    input{BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #ffffff 1px solid; BORDER-LEFT: #ffffff 1px solid; COLOR: #000080; BORDER-BOTTOM: #000000 1px solid; BACKGROUND-COLOR: #d8d8d0;width:40px;height:20px;}
    TD{border-bottom:#FFFFFF 1 solid;border-right:#FFFFFF 1 solid;height:25px;}</STYLE>
    <SCRIPT language="javascript">
    var total=0;               //全局变量total,累计输入
    var FlagNew = false;  //是否是新的操作数（输入的第二个数）
    var Opp = "";      //运算符变量function clearall(){
    total=0;
    document.myform.number.value=0;//清除结果
    }function enternumber(Num){    //数字按钮单击调用的函数，Num表示输入的数字
    if (FlagNew) {             //判断输入的是否新的操作数
    document.myform.number.value = Num; 
    FlagNew = false; 
    } 
    else { 
    if (document.myform.number.value== "0") 
    document.myform.number.value= Num; 
    else 
    document.myform.number.value+= Num; //记录输入的操作 数
    } 
    }function Operation (Op) {              //“加减乘除”按钮单击调用的函数，Op代表运算符号
    var Num1=document.myform.number.value; 
    if (FlagNew && Opp != "=");{
    FlagNew = true; 
     // 根据运算符进行运算
    if ( '+' == Opp) 
    total +=parseFloat(Num1); 
    else if ( '-' == Opp) 
    total -=parseFloat(Num1); 
    else if ( '/' == Opp) 
    total /=parseFloat(Num1); 
    else if ( '*' == Opp) 
    total *=parseFloat(Num1); 
    else 
    {total =parseFloat(Num1); }
    document.myform.number.value= total;   //结果文本框累计数字
    Opp = Op;
    } 
    }
    </SCRIPT> 
    </HEAD><BODY>
    <TABLE width="180" border="0" cellspacing="0" cellpadding="3"align="center">
       <FORM action="" method="post" name="myform">
       <TR>
        <TD colspan="4"><INPUT name="number" type="text" class="input1" value="0"></TD>
      </TR>
      <TR>
        <TD><INPUT name="number7" type="button" value="7" onClick="enternumber(7)"></TD>
    <TD><INPUT name="number8" type="button" value="8" onClick="enternumber(8)"></TD>
    <TD><INPUT name="number9" type="button" value="9" onClick="enternumber(9)"></TD>
    <TD><INPUT name="number+" type="button" value="+" onClick="Operation('+')"></TD>
      </TR>
      <TR>
        <TD><INPUT name="number4" type="button" value="4" onClick="enternumber(4)"></TD>
    <TD><INPUT name="number5" type="button" value="5" onClick="enternumber(5)"></TD>
    <TD><INPUT name="number6" type="button" value="6" onClick="enternumber(6)"></TD>
    <TD><INPUT name="number-" type="button" value="-" onClick="Operation('-')"></TD>
      </TR>
      <TR>
        <TD><INPUT name="number1" type="button" value="1" onClick="enternumber(1)"></TD>
    <TD><INPUT name="number2" type="button" value="2" onClick="enternumber(2)"></TD>
    <TD><INPUT name="number3" type="button" value="3" onClick="enternumber(3)"></TD>
    <TD><INPUT name="number*" type="button" value="*" onClick="Operation('*')"></TD>
      </TR>
      <TR>
        <TD><INPUT name="number0" type="button" value="0" onClick="enternumber(0)"></TD>
    <TD><INPUT name="numberC" type="button" value="C" onClick="clearall();"></TD>
    <TD><INPUT name="number/" type="button" value="/" onClick="Operation('/')"></TD>
    <TD><INPUT name="number=" type="button" value="=" onClick="Operation('=')"></TD>
      </TR></FORM>
    </TABLE>
    </BODY>
    </HTML>
      

  3.   

    windows计算器的科学计算器我一直没学会用，那几个特别的按键的功能我一直没弄明白。