javascript - 如何存储数字历史

这是简单的图示器。
如果写3 * 3并按“ =”，那么在（3 * 3 = 9）之类的文本区域中，这个答案太讨人喜欢了。

function  Git(){
   window.open("https://github.com/thelexa");
}
// hide element
function myFunction() {
  var x = document.getElementById("Cal");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
// display
function runLB(){
		document.case.display.value += "("
}
function runRB(){
		document.case.display.value += ")"
}
function run1(){
	document.case.display.value += "1"
};
function run2(){
	document.case.display.value += "2"
};
function run3(){
	document.case.display.value += "3"
};
function run4(){
	document.case.display.value += "4"
};
function run5(){
	document.case.display.value += "5"
};

function run6(){
    document.case.display.value += "6"
};
function run7(){
	document.case.display.value += "7"
};
function run8(){
	document.case.display.value += "8"
};
function run9(){
	document.case.display.value += "9"
};
function run0(){
	document.case.display.value += "0"
};
function runPlus(){
	document.case.display.value += "+"
};
function runMinus(){
	document.case.display.value += "-"
};
function runDivide(){
	document.case.display.value += "/"
};
function runMultiply(){
    document.case.display.value += "*"
};
function runComma(){
	document.case.display.value += "."
};
function runBack(){
	var val = document.case.display.value.slice(0, -1);
    document.case.display.value = val;
};
function runC(){
	document.case.display.value = ""
};
function runEquals() {
        if (document.case.display.value == "") {
        	document.case.display.value = ""
        } else  {
	var equals = eval(document.case.display.value)
	document.case.display.value = equals;
}
}

#wrapper{display:flex;}

html {
background:
	linear-gradient(rgba(196, 102, 0, 0.6), rgba(155, 89, 182, 0.6));
}
ul {
	list-style: none;
}
body {
	width: 500px;

}
#Git{
  position: absolute;
  color: #fff;
  background: rgba(155, 89, 182, 0.6);
  left: 94.5%;
  font-size: 20px;
  border-radius: 30px;
  width: 100px;
  height: 60px;
  font-family: sans-serif;
  text-decoration: none;
  box-sizing: border-box;
  background-size: 400%;

}
#Note {
margin-bottom: 35px;
 transform: translate(0,50%);
 width: 400px;
 height: 60px;
 line-height: 60px;
 color: #fff;
 font-size: 30px;
 text-transform: uppercase;
 text-decoration: none;
 font-family: sans-serif;
 box-sizing: border-box;
 background:linear-gradient(rgba(196, 102, 0, 0.9), rgba(155, 89, 182, 0.9));
 background-size: 400%;
 border-radius: 30px;
 z-index: 1;
}
#Note:hover
{
 animation: animate 5s linear infinite;
}
@keyframes animate
{
 0%
 {
  background-position: 0%;
 }
 100%
 {
  background-position: 500%;
 }
}
#Note:before
{
 content: '';
 position: absolute;
 top: -5px;
 left: -5px;
 right: -5px;
 bottom: -5px;
 z-index: -1;
 background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
 background-size: 400%;
 border-radius: 40px;
 opacity: 0;
 transition: 0.5s;
}
#Note:hover:before
{
 filter: blur(20px);
 opacity:1;
 animation: animate 5s linear infinite;
}
{}

form {
	background:linear-gradient(rgba(196, 102, 0, 0.6), rgba(155, 89, 182, 0.6));
	text-align: center;
	padding: 7px;
	align-content: center;
	border-radius: 10px;
    border: 5px solid rgba(196, 102, 0, 0.6);

}
#display {
	width: 98%;
	height: 50px;
	text-align: right;
	font-size: 3rem;
    margin: 5px;
	border: 5px solid rgba(196, 102, 0, 0.9);

}
.digit {
	font-size: 2rem;
	background-color: 	#f8f8f8;
	height: 55px;
	width: 20%;
    border: 1px solid #c6c6c6;
	display: inline-block;
	box-shadow: 1px 1px 1px;
	color:#444;
	font-family: Roboto-Regular,helvetica,arial,sans-serif;
	margin: 2px;
	opacity: 0.9;
}
.oper {
	font-size: 2rem;
	background-color: #d6d6d6;
	height: 55px;
	width: 20%;
	color: #444;
	display: inline-block;
	margin: 2px;
	box-shadow: 0 1px 1px;
	font-family: Roboto-Regular,helvetica,arial,sans-serif;
	opacity: 0.9;
}
#equal {
	background-color:rgba(196, 102, 0, 0.6) ;
	color: white;
	width: 41.5%;


}
textarea {
  display: block;
  resize: none;
  width: 400px;
  height: 450px;
  max-width: 400px;
  max-height: 350px;
  margin-top: 5px;
  font-size: 25px;
  border: 3px solid rgba(196, 102, 0, 0.9);


}
#result {
margin-left: 5px;
display:block
}

<html>
<head>
    <title>Calculator Project</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     <link rel="stylesheet" href="main.css" type="text/css">
        <script src="main.js" type="text/javascript"></script>
</head>

<body>


<button type="button" id="Git" onclick="Git()"> GitHub</button>
<div id="wrapper">
<form name="case" > <!--Numbers -->
  <input name="display" id="display" value="">
    <input type="button" class="oper" value="(" onclick="runLB()">
    <input type="button" class="oper" value=")" onclick="runRB()">
    <input type="button" id="back" 	class="oper" 	value="CE" onclick="runBack()">
   <input type="button" id="divide" 	class="oper" 	value="÷" onclick="runDivide()" >

    <input type="button" class="digit" value="1" onclick="run1()">
    <input type="button" class="digit" value="2" onclick="run2()">
    <input type="button" class="digit" value="3" onclick="run3()">
    <input type="button" id="multiply" 	class="oper" 	value="×" onclick="runMultiply()">

    <input type="button" class="digit" value="4" onclick="run4()">
    <input type="button" class="digit" value="5" onclick="run5()">
    <input type="button" class="digit" value="6" onclick="run6()">
    <input type="button" id="minus" 	class="oper" 	value="-" onclick="runMinus()" >

    <input type="button" class="digit" value="7" onclick="run7()">
    <input type="button" class="digit" value="8" onclick="run8()">
    <input type="button" class="digit" value="9" onclick="run9()">
    <input type="button" id="plus" 	class="oper" 	value="+"  onclick="runPlus()">

    <input type="button" class="digit" value="0" onclick="run0()">
    <input type="button" id="comma" class="digit" value="." onclick="runComma()">
    <input type="button" id="equal" 	class="oper"	value="=" onclick="runEquals()">

<div id="Cal">
<textarea  id ="result1" placeholder="Note"></textarea>
</div>
<div id="newpos">
<button type="button" id="Note" onclick="myFunction()"> Note</button></div>
</form>
<div id="new">
<textarea  id="result" placeholder="History"></textarea></div>
</div>
</body>

当按“ =”时，这是需要的样子。
每个答案都会帮助我，或者任何有关代码的想法看起来会更好，并能提高我的技能。
谢谢。

//看起来您的帖子大部分是代码；请添加更多详细信息。

最佳答案

var queue = [];// store key history

function getHistory() {
    var str = ''
    for (var i = 0; i < queue.length; i++)
        str += queue[i];
    return str;
}

function run7() {
    queue.push(7); // store key history
    document.case.display.value += "7";
};

function runMinus() {
    queue.push('-') // store key history
    document.case.display.value += "-";
};
...


function runEquals() {
    if (document.case.display.value == "") {
        document.case.display.value = "";
    } else {
        var equals = eval(document.case.display.value);
        document.case.display.value = equals;
        var resultWithHistory = getHistory() + ' = ' + equals;
        queue = []; // clear history
        display(resultWithHistory);
    }
}

关于javascript - 如何存储数字历史，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/55443773/