gpt4 book ai didi

javascript - 如何为计算器制作历史功能。在javascript中

转载 作者:行者123 更新时间:2023-11-28 07:41:18 25 4
gpt4 key购买 nike

我用 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(&quot;&quot;)" class="btn btn-warning"/>
</ul>
<ul>
<input type="button" value="7" onclick="v(&quot;7&quot;)" class="btn btn-info"/>
<input type="button" value="8" onclick="v(&quot;8&quot;)" class="btn btn-info"/>
<input type="button" value="9" onclick="v(&quot;9&quot;)" class="btn btn-info"/>
<input type="button" value="+" onclick="v(&quot;+&quot;)" class="btn btn-success"/>
</ul>
<ul>
<input type="button" value="4" onclick="v(&quot;4&quot;)" class="btn btn-info"/>
<input type="button" value="5" onclick="v(&quot;5&quot;)" class="btn btn-info"/>
<input type="button" value="6" onclick="v(&quot;6&quot;)" class="btn btn-info"/>
<input type="button" value="-" onclick="v(&quot;-&quot;)" class="btn btn-success"/>
</ul>
<ul>
<input type="button" value="1" onclick="v(&quot;1&quot;)" class="btn btn-info"/>
<input type="button" value="2" onclick="v(&quot;2&quot;)" class="btn btn-info"/>
<input type="button" value="3" onclick="v(&quot;3&quot;)" class="btn btn-info"/>
<input type="button" value="*" onclick="v(&quot;*&quot;)" class="btn btn-success"/>
</ul>
<ul>
<input type="button" value="0" onclick="v(&quot;0&quot;)" class="btn btn-info"/>
<input type="button" value="Equals" onclick="e()" class="btn btn-danger"/>
<input type="button" value="/" onclick="v(&quot;/&quot;)" 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(&quot;&quot;)" class="btn btn-warning" />
</li>
</ul>
<ul>
<li>
<input type="button" value="7" onclick="v(&quot;7&quot;)" class="btn btn-info" />
</li>
<li>
<input type="button" value="8" onclick="v(&quot;8&quot;)" class="btn btn-info" />
</li>
<li>
<input type="button" value="9" onclick="v(&quot;9&quot;)" class="btn btn-info" />
</li>
<li>
<input type="button" value="+" onclick="v(&quot;+&quot;)" class="btn btn-success" />
</li>
</ul>
<ul>
<li>
<input type="button" value="4" onclick="v(&quot;4&quot;)" class="btn btn-info" />
</li>
<li>
<input type="button" value="5" onclick="v(&quot;5&quot;)" class="btn btn-info" />
</li>
<li>
<input type="button" value="6" onclick="v(&quot;6&quot;)" class="btn btn-info" />
</li>
<li>
<input type="button" value="-" onclick="v(&quot;-&quot;)" class="btn btn-success" />
</li>
</ul>
<ul>
<li>
<input type="button" value="1" onclick="v(&quot;1&quot;)" class="btn btn-info" />
</li>
<li>
<input type="button" value="2" onclick="v(&quot;2&quot;)" class="btn btn-info" />
</li>
<li>
<input type="button" value="3" onclick="v(&quot;3&quot;)" class="btn btn-info" />
</li>
<li>
<input type="button" value="*" onclick="v(&quot;*&quot;)" class="btn btn-success" />
</li>
</ul>
<ul>
<li>
<input type="button" value="0" onclick="v(&quot;0&quot;)" 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(&quot;/&quot;)" class="btn btn-success" />
</li>
</ul>
<ul>
<li id="History"><h3>History:</h3></li>
</ul>

关于javascript - 如何为计算器制作历史功能。在javascript中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30936483/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com