我试图制作一个基于HTML的计算器,它还显示了以前的计算历史记录,但我对如何执行此操作感到困惑。如何将以前的计算结果存储为字符串,以便以后使用?嗨,我试图制作一个基于HTML的计算器,它还显示了以前的计算历史记录,但是我对如何执行此操作感到困惑。如何将先前的计算结果存储为字符串,以便以后使用?
<html>
<head>
<script>
//function that display value
function dis(val)
{
document.getElementById("result").value+=val
}
//function that evaluates the digit and return result
function solve()
{
let x = document.getElementById("result").value
let y = eval(x)
document.getElementById("result").value = y
}
//function that clear the display
function clr()
{
document.getElementById("result").value = ""
}
</script>
<!-- for styling -->
<style>
.title{
margin-bottom: 10px;
text-align:center;
width: 175px;
color:grey;
border: solid black 2px;
}
input[type="button"]
{
background-color:grey;
color: black;
border: solid black 2px;
width:100%
}
input[type="text"]
{
background-color:white;
border: solid black 2px;
width:100%
}
</style>
</head>
<!-- create table -->
<body>
<div class = title >ITP2 Calculator</div>
<table border="1">
<tr>
<td colspan="3"><input type="text" id="result"/></td>
<!-- clr() function will call clr to clear all value -->
</tr>
<tr>
<!-- create button and assign value to each button -->
<!-- dis("1") will call function dis to display value -->
<td><input type="button" value="1" onclick="dis('1')"/> </td>
<td><input type="button" value="3" onclick="dis('3')"/> </td>
<td><input type="button" value="+" onclick="dis('+')"/> </td>
</tr>
<tr>
<td><input type="button" value="5" onclick="dis('5')"/> </td>
<td><input type="button" value="7" onclick="dis('7')"/> </td>
<td><input type="button" value="/" onclick="dis('')"/> </td>
</tr>
<tr>
<td><input type="button" value="9" onclick="dis('9')"/> </td>
<td><input type="button" value="Clr" onclick="clr()"/> </td>
<td><input type="button" value="=" onclick="solve()"/> </td>
</tr>
</table>
</body>
</html>
显示历史记录的示例:2 + 3 = 53 + 5 = 8
您可以创建一个将数据保存到某个变量的函数,然后每当您想向历史记录中添加内容时就调用该函数。这是一个例子:
let history = '';
function addToHistory(value) {
history += value;
document.getElementById('history').innerText = history;
}
function dis(val) {
// your code...
addToHistory(val);
}
function solve() {
// your code...
addToHistory('=' + y);
}
function clr() {
// your code...
addToHistory(' ');
}
您可以在这里查看其工作方式:JSFiddle