重置计算器输入框,以便在js中进行下一个操作
reset the calculator input box for the next operation in js
它是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等)
相关文章:
- 如何使用ember.js在操作中传递当前上下文中目标旁边的信息
- 这是关于Jquery/JS的,如果我改变元素's HTML-我可以对它执行其他Jquery/JS操作吗
- 如何提取JS操作页面后的最终HTML
- 使用PHP获取AJAX或js操作后的文档源
- rails在重新加载时触发js操作
- 将 JS 操作与 JSF 同步
- 在JS操作DOM并传递请求标头后获取生成的HTML
- Javascript D3.js操作对象数组
- node.js操作库包含许多监控项
- 如何将内联js操作传递到外部js文件中
- 如何识别何时按下后退按钮并进行一些js操作
- 传递参数的if语句上的ember-js操作
- Jquery加载不同的内容,并使用仍在运行的js操作加载的内容
- 使用html画布和JS操作图像上的像素数据
- 不知道如何为' slideDown,js '操作引用对象
- 使用Node.js操作Mongoose/MongoDB数组
- 用JS操作对象
- 使用鼠标在浏览器中使用three.js操作对象
- 如何用js操作cookie
- 如何在ember js操作中获得龙卷风错误响应