重置计算器输入框,以便在js中进行下一个操作

reset the calculator input box for the next operation in js

本文关键字:js 操作 下一个 计算器 输入      更新时间:2023-09-26

它是html5和js中的计算器。在任何操作之后,如果我按下任何数字按钮,它将被添加到答案的末尾,如果操作是(2+2),答案将是(4),如果我按(5)按钮做另一个操作,它将被添加到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>

他们必须按等号按钮才能得到答案,对吗?

有一个标志(一个布尔变量,可能在全局范围内),当按下等号时设置为true(或者如果正确使用提交事件,则表单为"提交")。然后,在单击任何后续按钮时,如果该标志为真,则在执行正常例程之前清除输入框-当然要注意将标志设置回false。

你可能还想确保你的HTML是有效的(开始和结束HTML和正文标签,html5 doctype等)