2

它是 html5 和 js 中的计算器。任何操作后，如果我按下任何按钮编号，它将被添加到答案的末尾，如果操作是 (2+2)，答案将是 (4) 如果我按下 (5) 按钮进行另一个操作，它将是add to the end of 4 (45) 如果一个操作已经完成并开始另一个操作，我如何重置输入框？

这是我的代码

<title>Untitled Document</title>

<style type="text/css">

.border-style{
    border: hidden;
}

.input-style{
    width:100%;
    height:38px;
}

    </style>
    </head>

    <body>

<form name="calc">

    <table border=3 align="center" width="40%" style="border:solid" >

    <tr>
        <td colspan="5" height="40px" width="71%" class="border-style">
            <input id="input" type="text" name="Num" value="0"       style="width:98%; height:20px" />
        </td>
        <td align="center" width="14.2%" class="border-style">
            <input type="button" value="C"    onclick="deleteDigit(this.form.Num)" class="input-style"   />
        </td>
        <td align="center" width="14.2%" class="border-style">
            <input type="button" value="CE" onclick="document.calc.Num.value = ' ' "  class="input-style" />
        </td>
    </tr>

    <tr>
        <td  height="40px" width="14.2%" class="border-style">
            <input type="button" value="x^y" onclick="power(this.form)"      class="input-style" />
        </td>
        <td  height="40px" width="14.2%" class="border-style">
            <input type="button" value="Sin"   onclick="sin(this.form)"class="input-style" />
        </td>
        <td  height="40px" width="14.2%" class="border-style">
            <input type="button" value="7" onclick="document.calc.Num.value += '7'" class="input-style" />
        </td>
        <td  height="40px" width="14.2%" class="border-style">
            <input type="button" value="8" onclick="document.calc.Num.value += '8'" class="input-style" />
        </td>
        <td  height="40px" width="14.2%" class="border-style">
            <input type="button" value="9" onclick="document.calc.Num.value += '9'" class="input-style" />
        </td>
        <td  height="40px" width="14.2%" class="border-style">
            <input type="button" value="+/-"onclick="flipSign(this.form.Num)" class="input-style" />
        </td>
        <td  height="40px" width="14.2%" class="border-style">
            <input type="button" value="mod"onclick="document.calc.Num.value +='%'" class="input-style"/>
        </td>
    </tr>

    <tr>
        <td  height="40px" width="14.2%" class="border-style">
            <input type="button" value="root" onclick="sqrt(this.form)" class="input-style"/>
        </td>
        <td  height="40px" width="14.2%" class="border-style">
            <input type="button" value="cos" onclick="cos(this.form)" class="input-style" />
        </td>
        <td  height="40px" width="14.2%" class="border-style">
            <input type="button" value="4" onclick="document.calc.Num.value +='4'" class="input-style" />
        </td>
        <td  height="40px" width="14.2%" class="border-style">
            <input type="button" value="5"onclick="document.calc.Num.value +='5'" class="input-style" />
        </td>
        <td  height="40px" width="14.2%" class="border-style">
            <input type="button" value="6"onclick="document.calc.Num.value +='6'" class="input-style" />
        </td>
        <td  height="40px" width="14.2%" class="border-style">
            <input type="button" value="+"onclick="document.calc.Num.value +='+'" class="input-style" />
        </td>
        <td  height="40px" width="14.2%" class="border-style">
            <input type="button" value="-"onclick="document.calc.Num.value +='-'" class="input-style" />
        </td>
    </tr>

    <tr>
        <td  height="40px" width="14.2%" class="border-style">
            <input type="button" value="n!"onclick="factorial(this.form)" class="input-style"/>
        </td>
        <td  height="40px" width="14.2%" class="border-style">
            <input type="button" value="tan"onclick="tan(this.form)" class="input-style" />
        </td>
        <td  height="40px" width="14.2%" class="border-style">
            <input type="button" value="1"onclick="document.calc.Num.value +='1'" class="input-style" />
        </td>
        <td  height="40px" width="14.2%" class="border-style">
            <input type="button" value="2"onclick="document.calc.Num.value +='2'" class="input-style" />
        </td>
        <td  height="40px" width="14.2%" class="border-style">
            <input type="button" value="3"onclick="document.calc.Num.value +='3'" class="input-style" />
        </td>
        <td  height="40px" width="14.2%" class="border-style">
            <input type="button" value="*"onclick="document.calc.Num.value +='*'" class="input-style" />
        </td>
        <td  height="40px" width="14.2%" class="border-style">
            <input type="button" value="/"onclick="document.calc.Num.value +='/'" class="input-style" />
        </td>
   </tr>
   <tr>
        <td  height="40px" width="14.2%" class="border-style">
            <input type="button" value="fib"onclick="fib(this.form)"  class="input-style" />
        </td>
        <td  height="40px" width="14.2%" class="border-style">
            <input type="button" value="log"onclick="lg(this.form)"  class="input-style" />
        </td>
        <td  height="40px" width="14.2%" class="border-style">
            <input type="button" value="0"onclick="document.calc.Num.value +='0'"  class="input-style" />
        </td>
        <td  height="40px" width="14.2%" class="border-style">
            <input type="button" value="." onclick="document.calc.Num.value +='.'"  class="input-style" />
        </td>
        <td  height="40px" width="14.2%" class="border-style">
            <input type="button" value="10^x" onclick="powerten(this.form)"  class="input-style" />
        </td>
        <td  height="40px" width="14.2%" class="border-style">
            <input type="button" value="Ans" onclick="SaveANS()"  class="input-style" />
        </td>
        <td  height="40px" width="14.2%" class="border-style">
            <input type="button" value="=" onclick="equal(this.form)"  class="input-style" />
        </td>
   </tr>

   </table>

   <script type="text/javascript" >

// saving Ans
var Ans=0;


// Delete last digit entered
function deleteDigit(Num) {
    Num.value = Num.value.substring(0, Num.value.length - 1)
} 


// Power Function
function power(n){ 
    if (n.Num.value != "" && n.Num.value != 0 ){
        var p=prompt("Enter the power:")
        n.Num.value = Math.pow(n.Num.value,p)
        Ans=n.Num.value;
    }
    else 
        alert("Enter a number first")   
}


// sin Function
function sin(n) {
    n.Num.value = Math.sin(n.Num.value);
    Ans=n.Num.value;
}


// Flips the sign of the value 
function flipSign(Num) {
    if(Num.value.substring(0, 1) == "-")
        Num.value = Num.value.substring(1, Num.value.length)
    else
        Num.value = "-" + Num.value
}


// Square root Function
function sqrt(n) {
    if (n.Num.value != "" && n.Num.value != 0 ){
        var p=prompt("Enter the root:")
        p=1/p;
        n.Num.value = Math.pow(n.Num.value,p)
        Ans=n.Num.value;
    }
    else 
        alert(" please input the nuber first  !!!")   
}



// cos Function
function cos(n) {
    n.Num.value = Math.cos(n.Num.value);
    Ans=n.Num.value;
}


// Factorial Function
function factorial(n){
    var var1, var2;
    var1=1;
    var2=1;
    var x=n.Num.value;

    do {
        var1=var1*var2;
        var2=1+var2;
    }while(var2<=x);

    n.Num.value =var1;
    Ans=var1; 
 }


// tan Function 
function tan(n) {
    n.Num.value = Math.tan(n.Num.value);
    Ans=n.Num.value;
}


// Fibonacci Function
function fib(n){   
    var var1=0;
    var var2=1;
    var result;
    var x= n.Num.value;
    for ( var i=1 ; i<x ; i++){ 
        result=var1+var2;
        var1=var2;
        var2=result;
    }
    n.Num.value =result;
    Ans=result;
}


// Log Function
function lg(form) {
    n.Num.value = Math.log(n.Num.value);
    Ans=n.Num.value;
}


// 10^powr Function
function powerten(n) {  
    var x=n.Num.value;
    n.Num.value = Math.pow(10,x)
    Ans=n.Num.value;
}


function equal(n){
    var var1=eval(document.getElementById("input").value);
    result = eval(var1) ;
    document.getElementById("input").value = result ;
    Ans=result;

}


function SaveANS(){
    document.getElementById("input").value =Ans;
}

    </script>

    </form>
    </body>

    </html>
4

1 回答 1

2

他们必须按下等号按钮才能得到答案，对吗？

有一个标志（一个布尔变量，可能在全局范围内），当按下等号时设置为真（或者如果您正确使用提交事件，则表单被“提交”）。然后，在任何后续按钮单击时，如果该标志为真，请在执行正常例程之前清除输入框——当然，注意将标志设置回假。

您可能还想确保您的 HTML 有效（开始和结束 html 和正文标记、html5 doctype 等）

于 2013-03-17T07:22:00.997 回答