试图创建一个计算器，在顶部显示以前键入的数字
Trying to create a calculator that display the previous typed number at the top
Windows计算器。这是我的计算器的完整代码。我认为这个函数是正确的，但我想在我键入的当前数字的顶部显示我以前键入的数字，就像在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>为了实现这一点，您需要对计算器按钮功能进行一些扩展，但完全有可能不需要深入研究jQuery。
如前所述，您需要一个"第二个屏幕"来保持等式字符串。
下面实现了您想要的功能，再加上一些小部件，使其按预期工作。
使用eval()时应该小心，因为它会执行任何有效的JavaScript代码。更多信息：Javascript eval（）这么危险吗？
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>jsFiddle：http://jsfiddle.net/sysnull/ufyp6qdk/
您可以通过添加第二个"显示器"来实现这一点。每次你点击一个按钮，而不仅仅是更新第一个显示，你可以像这样更新两者：
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/
相关文章：
- 完整日历 (v2） 在每周视图槽的顶部显示弹出框
- 未显示在数据生成的d3形状顶部的套印格式
- 在顶部显示滚动条&DIV
- 仪表D3.js在指针顶部显示值
- 在顶部框架上显示模态弹出窗口
- Chrome扩展-在全屏视频顶部显示自定义通知/弹出窗口(HTML元素）
- 如何在文本字段顶部显示弹出框
- 在页面顶部显示您的应用
- 聚合物适合抽屉顶部的纸张对话框显示
- 可拖动图标未显示在 Google 地图顶部且不重复
- 如何阻止我的汉堡图标停留在顶部栏上，使其与侧边菜单一起显示
- 如何在表单顶部显示所有适用的错误消息，而不是逐个显示错误消息
- 当圆形图像在圆轮中发生变化时，如何在顶部显示标签
- 如何在移动浏览器的屏幕顶部显示自定义警报
- 使用滚动顶部显示滚动的像素
- 在锚标记顶部显示交互式 Html 元素
- 在图像顶部显示文本
- 当在 Ul 上使用向上/向下箭头到达溢出自动项目的顶部/底部时显示隐藏的项目
- 强制safari在智能手机上始终显示顶部栏
- 获取标题的高度，并在滚动到标题之外时显示顶部导航
