如何使计算器的历史功能。在 JavaScript 中答案

【问题标题】：How to make history feature to calculator. In javascript如何使计算器的历史功能。在 JavaScript 中
【发布时间】：2015-06-19 11:00:32
【问题描述】：

我用 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

【问题讨论】：

你试过自己解决吗？如果是，请发布您尝试过的内容。
您可以使用 sessionStorage，甚至可以跟踪数组中的计算。
我该怎么做？我是编程的初学者。我在学习
@Banana 我没有。我不知道该怎么做。我是初学者。

标签： javascript jquery html css calculator

【解决方案1】：

首先，您需要使用正确的 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>

【讨论】：