【发布时间】：2020-07-09 09:58:34
【问题描述】：
<html>
<head>
<meta charset="UTF-8" />
<title>Taschenrechner</title>
<script type="text/javascript">
function Check(Eingabe) {
var nur_das = "0123456789[]()-+*%/";
for (var i = 0; i < Eingabe.length; i++)
if (nur_das.indexOf(Eingabe.charAt(i)) < 0) return false;
return true;
}
function Ergebnis() {
var x = 0;
var y = 0;
if (Check(window.document.Rechner.Display.value))
y = window.document.Rechner.Display.value;
window.document.Rechner.Display2.value = y;
x = eval(window.document.Rechner.Display.value);
window.document.Rechner.Display.value = "=" + x;
}
function add(Zeichen) {
window.document.Rechner.Display.value =
window.document.Rechner.Display.value + Zeichen;
}
function backspace() {
var arrayexit = window.document.Rechner.Display.value;
for (var i = 0; i < arrayexit.length; i++) {
var output = arrayexit.slice(0, -1);
window.document.Rechner.Display.value = output;
}
}
var myTableDiv = document.getElementById("Historie");
var table = document.createElement("TABLE");
var tableBody = document.createElement("TBODY");
table.border = "1";
table.appendChild(tableBody);
var array = new Array();
function ausgabe() {
var array = new Array();
array.push(
window.document.Rechner.Display2.value +
window.document.Rechner.Display.value
);
console.log(array);
var myTableDiv = document.getElementById("Historie");
var table = document.createElement("TABLE");
var tableBody = document.createElement("TBODY");
table.border = "1";
table.appendChild(tableBody);
var tr = document.createElement("TR");
tableBody.appendChild(tr);
var th = document.createElement("TH");
th.width = "75";
th.appendChild(document.createTextNode(array[0]));
tr.appendChild(th);
myTableDiv.appendChild(table);
}
</script>
<style type="text/css">
.button {
width: 60px;
text-align: center;
font-family: System, sans-serif;
font-size: 100%;
}
.display {
width: 100%;
text-align: right;
font-family: System, sans-serif;
font-size: 100%;
}
</style>
</head>
<body bgcolor="#FFFFE0" text="#000000">
<form name="Rechner" action="" onSubmit="Ergebnis();return false;">
<table style="float: left;" border="5" cellpadding="10" cellspacing="0">
<tr>
<td bgcolor="#C0C0C0">
<input
type="text"
name="Display2"
align="right"
class="display"
readonly
/>
<input
type="text"
name="Display"
align="right"
class="display"
readonly
/>
</td>
</tr>
<tr>
<td bgcolor="#E0E0E0">
<table border="0" cellpadding="0" cellspacing="2">
<tr>
<td>
<input
type="button"
width="60"
class="button"
value=" 7 "
onClick="add('7')"
/>
</td>
<td>
<input
type="button"
width="60"
class="button"
value=" 8 "
onClick="add('8')"
/>
</td>
<td>
<input
type="button"
width="60"
class="button"
value=" 9 "
onClick="add('9')"
/>
</td>
<td>
<input
type="button"
width="60"
class="button"
value=" <- "
onClick="backspace()"
/>
</td>
</tr>
<tr>
<td>
<input
type="button"
width="60"
class="button"
value=" 4 "
onClick="add('4')"
/>
</td>
<td>
<input
type="button"
width="60"
class="button"
value=" 5 "
onClick="add('5')"
/>
</td>
<td>
<input
type="button"
width="60"
class="button"
value=" 6 "
onClick="add('6')"
/>
</td>
<td>
<input
type="button"
width="60"
class="button"
value=" + "
onClick="add('+')"
/>
</td>
</tr>
<tr>
<td>
<input
type="button"
width="60"
class="button"
value=" 1 "
onClick="add('1')"
/>
</td>
<td>
<input
type="button"
width="60"
class="button"
value=" 2 "
onClick="add('2')"
/>
</td>
<td>
<input
type="button"
width="60"
class="button"
value=" 3 "
onClick="add('3')"
/>
</td>
<td>
<input
type="button"
width="60"
class="button"
value=" - "
onClick="add('-')"
/>
</td>
</tr>
<tr>
<td>
<input
type="button"
width="60"
class="button"
value=" . "
onClick="add('.')"
/>
</td>
<td>
<input
type="button"
width="60"
class="button"
value=" 0 "
onClick="add('0')"
/>
</td>
<td>
<input
type="button"
width="60"
class="button"
value=" = "
onClick="Ergebnis();ausgabe()"
/>
</td>
<td>
<input
type="button"
width="60"
class="button"
value=" * "
onClick="add('*')"
/>
</td>
</tr>
<tr>
<td>
<input
type="button"
width="60"
class="button"
value=" ( "
onClick="add('(')"
/>
</td>
<td>
<input
type="button"
width="60"
class="button"
value=" ) "
onClick="add(')')"
/>
</td>
<td>
<input type="reset" width="60" class="button" value=" C " />
</td>
<td>
<input
type="button"
width="60"
class="button"
value=" / "
onClick="add('/')"
/>
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
<div id="Historie" bground="red" width="250px" heigth="900px"></div>
</body>
</html>
在用户按下“=”并调用函数“Ergebnis”和“ausgabe”后，我希望下次他按下一个数字来擦除 2 个输入字段内的所有内容，但显然只是下一次。
也欢迎任何其他改进想法=)
在用户按下“=”并调用函数“Ergebnis”和“ausgabe”后，我希望下次他按下一个数字来擦除 2 个输入字段内的所有内容，但显然只是下一次。
也欢迎任何其他改进想法=)
【问题讨论】：
-
您可以使用
boolean变量来检查是否单击了按钮。每次单击按钮时，它都会将变量更改为相反的值，即真或假。现在有了这个，您可以检查变量的特定状态，并根据它清除输入或某事。 -
但这只能在第一次使用对吗？...必须更频繁地工作，因为我希望计算器能够跟踪历史并流畅使用
-
不，
boolean变量可以从true无限次更改为false，function的有效性也可以。 -
正如@N-HJ所说，每次点击按钮两次，都会将变量重置为原始状态，整个过程重新开始。
-
@hgb123 你是如何快速快速地更改格式的？
标签： javascript html css event-handling dom-events