Question

我用HTML，CSS，Javascript开发了Calculator。这是来源：

＆＃13;

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')
    }
}

＆＃13;

<!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>

＆＃13;

我想添加我的计算器的历史记录功能。当我计算一些东西时，我想把它保存在我的计算器底部或其他地方。我想用Javascript来做它。我怎么能这样做？历史记录必须如下2+2=4

Answer 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>

如何使计算器的历史功能。在javascript中

1 个答案: