我用 HTML、CSS 和 Javascript 开发了计算器。这是来源:
function c(val)
{
document.getElementById("chasaweriveli").value=val;
}
function v(val)
{
document.getElementById("chasaweriveli").value+=val;
}
function e()
{
try
{
c(eval(document.getElementById("chasaweriveli").value))
}
catch(e)
{
c('Error')
}
}<!DOCTYPE html>
<html>
<head>
<title>Calculator By Gh0st</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<ul>
<input id="chasaweriveli" type="text" size="10" readonly=""/>
<input type="button" value="C" onclick="c("")" class="btn btn-warning"/>
</ul>
<ul>
<input type="button" value="7" onclick="v("7")" class="btn btn-info"/>
<input type="button" value="8" onclick="v("8")" class="btn btn-info"/>
<input type="button" value="9" onclick="v("9")" class="btn btn-info"/>
<input type="button" value="+" onclick="v("+")" class="btn btn-success"/>
</ul>
<ul>
<input type="button" value="4" onclick="v("4")" class="btn btn-info"/>
<input type="button" value="5" onclick="v("5")" class="btn btn-info"/>
<input type="button" value="6" onclick="v("6")" class="btn btn-info"/>
<input type="button" value="-" onclick="v("-")" class="btn btn-success"/>
</ul>
<ul>
<input type="button" value="1" onclick="v("1")" class="btn btn-info"/>
<input type="button" value="2" onclick="v("2")" class="btn btn-info"/>
<input type="button" value="3" onclick="v("3")" class="btn btn-info"/>
<input type="button" value="*" onclick="v("*")" class="btn btn-success"/>
</ul>
<ul>
<input type="button" value="0" onclick="v("0")" class="btn btn-info"/>
<input type="button" value="Equals" onclick="e()" class="btn btn-danger"/>
<input type="button" value="/" onclick="v("/")" class="btn btn-success"/>
</ul>
</body>
</html>我想在我的计算器底部添加历史记录功能。当我计算一些东西时，我想将它保存在我的计算器底部或其他地方。我想用 Javascript 来解决它。我该怎么做？
历史必须像这样 2+2=4
最佳答案
首先，您需要使用正确的 html。用户列表 <ul>只能包含列表项 <li>作为直系子女。如果您不喜欢结果，只需设置列表项的样式或不使用用户列表。
其次，如果您需要保留历史记录，只需在计算其中的公式之前将文本框的值附加到历史元素:
*第三:我建议不要使用 eval()因为它的行为是不可预测的并且可以被破坏。更好地解析公式并通过预定义函数处理计算。
function c(val) {
document.getElementById("chasaweriveli").value = val;
}
function v(val) {
document.getElementById("chasaweriveli").value += val;
}
function e() {
try {
var Formula = document.getElementById("chasaweriveli").value;
var Result =eval(Formula);
c(Result)
document.getElementById("History").innerHTML += Formula +"="+Result + "<br/>";
} catch (e) {
c('Error')
}
}ul li {
display: inline-block;
list-style-type: none;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<ul>
<li>
<input id="chasaweriveli" type="text" size="10" readonly="" />
</li>
<li>
<input type="button" value="C" onclick="c("")" class="btn btn-warning" />
</li>
</ul>
<ul>
<li>
<input type="button" value="7" onclick="v("7")" class="btn btn-info" />
</li>
<li>
<input type="button" value="8" onclick="v("8")" class="btn btn-info" />
</li>
<li>
<input type="button" value="9" onclick="v("9")" class="btn btn-info" />
</li>
<li>
<input type="button" value="+" onclick="v("+")" class="btn btn-success" />
</li>
</ul>
<ul>
<li>
<input type="button" value="4" onclick="v("4")" class="btn btn-info" />
</li>
<li>
<input type="button" value="5" onclick="v("5")" class="btn btn-info" />
</li>
<li>
<input type="button" value="6" onclick="v("6")" class="btn btn-info" />
</li>
<li>
<input type="button" value="-" onclick="v("-")" class="btn btn-success" />
</li>
</ul>
<ul>
<li>
<input type="button" value="1" onclick="v("1")" class="btn btn-info" />
</li>
<li>
<input type="button" value="2" onclick="v("2")" class="btn btn-info" />
</li>
<li>
<input type="button" value="3" onclick="v("3")" class="btn btn-info" />
</li>
<li>
<input type="button" value="*" onclick="v("*")" class="btn btn-success" />
</li>
</ul>
<ul>
<li>
<input type="button" value="0" onclick="v("0")" class="btn btn-info" />
</li>
<li>
<input type="button" value="Equals" onclick="e()" class="btn btn-danger" />
</li>
<li>
<input type="button" value="/" onclick="v("/")" class="btn btn-success" />
</li>
</ul>
<ul>
<li id="History"><h3>History:</h3></li>
</ul>关于javascript - 如何为计算器制作历史功能。在javascript中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30936483/