堆棧內存溢出
  簡體   English   中英

如何存儲數字歷史

[英]How to store history of numbers

 原文  2019-03-31 17:54:05  3   1    javascript/ html/ css/ textarea/ calculator

問題描述

這是簡單的圖示器。 如果寫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>
在此處輸入圖片說明

當按“ =”時，這是需要的樣子。 每個答案都會幫助我，或者任何有關代碼的想法看起來會更好，並能提高我的技能。 謝謝。

//看起來您的帖子大部分是代碼； 請添加更多詳細信息。

1 個解決方案

解決方案1
 1 已采納  2019-03-31 18:43:57

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

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 歷史記錄Api：如何存儲頁面 如何使歷史日志存儲在電子表格中？ 如何在Mongoose / MongoDB中存儲文檔的歷史記錄？ 如何存儲 2048 游戲的數字 如何存儲和使用我自己的應用程序頁面歷史記錄 如何在HTML5歷史狀態中存儲函數 如何在 React Native 中存儲開始和結束時間並將它們作為歷史記錄 如何使用localStorage存儲用戶的頁面歷史記錄？ 如何使用 react-router、瀏覽器歷史記錄存儲頁面 session？ 如何存儲Pubnub歷史記錄中的數據並使其可供所有控制器使用？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM