Windows calculator here. 这是我的计算器的完整代码。我认为该功能是正确的，但我想显示我输入的当前号码顶部的前一个号码，就像在Windows上运行的默认计算器一样。
<html>
<head></head>
<style>
input[type=button] {
color:white;
border:0;
display:block;
height:110px;
width: 90px;
font-family: Broadway;
font-size:200%;
box-shadow: 0px 4px rgba(0, 0, 0, 0.2);
border-radius: 3px;
margin: 0 7px 11px 0;
transition: all 0.2s ease;
}
td{
background-color:;
}
input[type=text] {
color:black;
font-size:300%;
height:100px;
border-radius: 5px;
}
#calculator {
width: 425px;
height: auto;
margin: 100px auto;
padding: 20px 20px 9px;
background: #9dd2ea;
background: linear-gradient(#9dd2ea, #8bceec);
border-radius: 3px;
box-shadow: 0px 4px #009de4, 0px 10px 15px rgba(0, 0, 0, 0.2);
}
p{
color:grey;
}
#clear{
height:2px;
width:2px;
background-color: red;
}
</style>
<body background="background.jpg">
<div style="background-color: " id=calculator>
<center>
<h1>CASIO</h1>
<h3>Calas og Sinselyo</h31>
<br/>
</center>
<center>
<form Name="calc">
<table>
<tr>
<td colspan=4><input style="background-color:#F0FFFF" type="text" size=12 Name="display" readonly="true"></td>
</tr>
</table>
<br>
</center>
<center>
<table>
<tr>
<td><input style="height:50px; background-color:#F08080" type=button value="C" OnClick="calc.display.value=''"></td>
</tr>
<tr>
<td><input type=button value="1" OnClick="calc.display.value+='1'"></td>
<td><input type=button value="2" OnClick="calc.display.value+='2'"></td>
<td><input type=button value="3" OnClick="calc.display.value+='3'"></td>
<td><input type=button value="+" OnClick="calc.display.value+='+'"></td>
</tr>
<tr>
<td><input type=button value="4" OnClick="calc.display.value+='4'"></td>
<td><input type=button value="5" OnClick="calc.display.value+='5'"></td>
<td><input type=button value="6" OnClick="calc.display.value+='6'"></td>
<td><input type=button value="-" OnClick="calc.display.value+='-'"></td>
</tr>
<tr>
<td><input type=button value="7" OnClick="calc.display.value+='7'"></td>
<td><input type=button value="8" OnClick="calc.display.value+='8'"></td>
<td><input type=button value="9" OnClick="calc.display.value+='9'"></td>
<td><input type=button value="x" OnClick="calc.display.value+='*'"></td>
</tr>
<tr>
<td><input type=button value="0" OnClick="calc.display.value+='0'"></td>
<td><input type=button value="." OnClick="calc.display.value+='.'"></td>
<td><input type=button value="=" OnClick="calc.display.value=eval(calc.display.value)"></td>
<td><input type=button value="/" OnClick="calc.display.value+='/'"></td>
</tr>
</table>
</form>
</center>
<p align="right">by: Raymart C. Lopez</p>
</div>
</body>
</html>
答案 0 :(得分：0)
您可以通过添加第二个＆＃34;显示＆＃34;来实现此目的。 每次单击按钮，而不是仅更新第一个显示，您可以像这样更新：
input[type=button] {
color:black;
border:0;
display:block;
height:110px;
width: 90px;
font-family: Broadway;
font-size:200%;
box-shadow: 0px 4px rgba(0, 0, 0, 0.2);
border-radius: 3px;
margin: 0 7px 11px 0;
transition: all 0.2s ease;
}
td{
background-color:;
}
input[type=text] {
color:black;
font-size:300%;
height:100px;
border-radius: 5px;
}
#calculator {
width: 425px;
height: auto;
margin: 100px auto;
padding: 20px 20px 9px;
background: #9dd2ea;
background: linear-gradient(#9dd2ea, #8bceec);
border-radius: 3px;
box-shadow: 0px 4px #009de4, 0px 10px 15px rgba(0, 0, 0, 0.2);
}
p{
color:grey;
}
#clear{
height:2px;
width:2px;
background-color: red;
}<div style="background-color: " id=calculator>
<center>
<h1>CASIO</h1>
<h3>Calas og Sinselyo</h31>
<br/>
</center>
<center>
<form Name="calc">
<table>
<tr>
<td colspan=4>
<input style="background-color:#F0FFFF" type="text" size=12 Name="displayAll" readonly="true">
<input style="background-color:#F0FFFF" type="text" size=12 Name="display" readonly="true"></td>
</tr>
</table>
<br>
</center>
<center>
<table>
<tr>
<td><input style="height:50px; background-color:#F08080" type=button value="C" OnClick="calc.display.value='';calc.displayAll.value='' "></td>
</tr>
<tr>
<td><input type=button value="1" OnClick="calc.display.value+='1'; calc.displayAll.value+='1';"></td>
<td><input type=button value="2" OnClick="calc.display.value+='2'; calc.displayAll.value+='2';"></td>
<td><input type=button value="3" OnClick="calc.display.value+='3'; calc.displayAll.value+='3';"></td>
<td><input type=button value="+" OnClick="calc.display.value+='+'; calc.displayAll.value+='+';"></td>
</tr>
<tr>
<td><input type=button value="4" OnClick="calc.display.value+='4'; calc.displayAll.value+='4';"></td>
<td><input type=button value="5" OnClick="calc.display.value+='5'; calc.displayAll.value+='5';"></td>
<td><input type=button value="6" OnClick="calc.display.value+='6'; calc.displayAll.value+='6';"></td>
<td><input type=button value="-" OnClick="calc.display.value+='-'; calc.displayAll.value+='-';"></td>
</tr>
<tr>
<td><input type=button value="7" OnClick="calc.display.value+='7'; calc.displayAll.value+='7';"></td>
<td><input type=button value="8" OnClick="calc.display.value+='8'; calc.displayAll.value+='8';"></td>
<td><input type=button value="9" OnClick="calc.display.value+='9'; calc.displayAll.value+='9';"></td>
<td><input type=button value="x" OnClick="calc.display.value+='*'; calc.displayAll.value+='*';"></td>
</tr>
<tr>
<td><input type=button value="0" OnClick="calc.display.value+='0'; calc.displayAll.value+='0';"></td>
<td><input type=button value="." OnClick="calc.display.value+='.'; calc.displayAll.value+='.';"></td>
<td><input type=button value="=" OnClick="calc.display.value=eval(calc.display.value); calc.displayAll.value+='='+eval(calc.display.value);"></td>
<td><input type=button value="/" OnClick="calc.display.value+='/';calc.displayAll.value+='/';"></td>
</tr>
</table>
</form>
</center>
<p align="right">by: Raymart C. Lopez</p>
</div>
另一种处理此类任务的方法是创建一个单独的函数来为您完成工作，每次单击一个按钮时，让该函数决定要做什么。你可以在这里看到一个例子：https://jsfiddle.net/f4gz4uub/1/
答案 1 :(得分：0)
为了实现这一点，你需要在计算器按钮功能上进行一些扩展，但它完全可能无需深入研究jQuery。
如上所述，您需要一个“第二个屏幕”来保存方程式字符串。
以下实现了您正在寻找的功能，以及一些小功能，使其按预期工作。
使用eval()时应该小心，因为它会逐字执行任何有效的JavaScript代码。更多信息：Is Javascript eval() so dangerous?
var endOfCalculation = false;
var els = document.getElementsByClassName('calc-button');
for(var i = 0;i < els.length;i++) {
els[i].addEventListener('click', function(e) {
var source = e.target || e.srcElement;
addToEquation(source.value);
}, false);
}
var clearEl = document.getElementById('clearButton');
clearEl.addEventListener('click', function() {
calc.display.value = '';
calc.displayTop.value = '';
});
var equalsEl = document.getElementById('calcEquals');
equalsEl.addEventListener('click', function() {
calc.displayTop.value += calc.display.value;
executeCalculation();
endOfCalculation = true;
});
function executeCalculation() {
calc.display.value = eval(calc.displayTop.value);
}
function addToEquation(char) {
if(endOfCalculation) {
calc.displayTop.value = '';
if(!isOperator(char)) {
calc.display.value = '';
calc.displayTop.value = '';
}
endOfCalculation = false;
}
calc.display.value += char;
if(isOperator(char)) {
calc.displayTop.value += calc.display.value;
calc.display.value = '';
}
}
function isOperator(char) {
return char === '+' || char === '-' || char === '*' || char === '/';
}input[type=button] {
color:white;
border:0;
display:block;
height:110px;
width: 90px;
font-family: Broadway;
font-size:200%;
box-shadow: 0px 4px rgba(0, 0, 0, 0.2);
border-radius: 3px;
margin: 0 7px 11px 0;
transition: all 0.2s ease;
}
td{
background-color:;
}
#topRow {
height: 50px;
padding-bottom:0;
}
input[type=text] {
color:black;
font-size:300%;
height:100px;
border-radius: 5px;
}
#calculator {
width: 425px;
height: auto;
margin: 100px auto;
padding: 20px 20px 9px;
background: #9dd2ea;
background: linear-gradient(#9dd2ea, #8bceec);
border-radius: 3px;
box-shadow: 0px 4px #009de4, 0px 10px 15px rgba(0, 0, 0, 0.2);
}
p{
color:grey;
}
#clear{
height:2px;
width:2px;
background-color: red;
}<body background="background.jpg">
<div style="background-color: " id=calculator>
<center>
<h1>CASIO</h1>
<h3>Calas og Sinselyo</h3>
<br/>
</center>
<center>
<form Name="calc">
<table>
<tr>
<td colspan=4><input id="topRow" style="background-color:#F0FFFF" type="text" size=12 Name="displayTop" readonly="true"></td>
</tr>
<tr>
<td colspan=4><input id="immediateRow" style="background-color:#F0FFFF" type="text" size=12 Name="display" readonly="true"></td>
</tr>
</table>
<br>
</center>
<center>
<table>
<tr>
<td><input style="height:50px; background-color:#F08080" type=button value="C" id="clearButton"></td>
</tr>
<tr>
<td><input type="button" value="1" class="calc-button"></td>
<td><input type="button" value="2" class="calc-button"></td>
<td><input type="button" value="3" class="calc-button"></td>
<td><input type="button" value="+" class="calc-button"></td>
</tr>
<tr>
<td><input type="button" value="4" class="calc-button"></td>
<td><input type="button" value="5" class="calc-button"></td>
<td><input type="button" value="6" class="calc-button"></td>
<td><input type="button" value="-" class="calc-button"></td>
</tr>
<tr>
<td><input type="button" value="7" class="calc-button"></td>
<td><input type="button" value="8" class="calc-button"></td>
<td><input type="button" value="9" class="calc-button"></td>
<td><input type="button" value="*" class="calc-button"></td>
</tr>
<tr>
<td><input type="button" value="0" class="calc-button"></td>
<td><input type="button" value="." class="calc-button"></td>
<td><input type="button" value="=" id="calcEquals"></td>
<td><input type="button" value="/" class="calc-button"></td>
</tr>
</table>
</form>
</center>
<p align="right">by: Raymart C. Lopez</p>
</div>