從 jQuery 中的計算器中刪除前導零

Question

我正在用 jQuery 構建一個簡單的計算器。 這個想法是在加載時以及單擊清除按鈕時最初將顯示設置為零。 當我單擊任何按鈕時，應根據我單擊的內容將數字零替換為數字或運算符。 問題是數字零在其他數字旁邊，除非我單擊十進制按鈕，否則它不應該在那里。

我嘗試了一些方法，例如當單擊任何按鈕（例如 7、+ 等）時，將顯示的數字零替換為相應的按鈕值。 可悲的是，這樣做要么返回正確的值，但不會添加更多的數字和運算符，或者干脆停止一起運行。

有沒有辦法繞過這個問題？ 非常感謝任何指導和提示。

 // Set initial display to zero $("#display").val(0); // User inputs the numbers and operators function number(value) { // Remove leading zero if any button is clicked // $("#display").val(''); <-- this will clear 0 but will prevent calculator from functioning normally document.form.result.value += value; } // Clear the display and set display to zero function cle(value) { document.form.result.value = 0; } // Calculate the numbers function evalua() { document.form.result.value = eval( document.form.result.value) }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form name="form"> <table align="center"> <tr> <td colspan="4"><input type="text" name="result" readonly></input> </td> </tr> <tr> <td><button onclick="number(value)" value="7" type="button">7</button></td> <td><button onclick="number(value)" value="8" type="button">8</button></td> <td><button onclick="number(value)" value="9" type="button">9</button></td> <td><button onclick="number(value)" value="+" type="button">+</button></td> </tr> <tr> <td><button onclick="number(value)" value="4" type="button">4</button></td> <td><button onclick="number(value)" value="5" type="button">5</button></td> <td><button onclick="number(value)" value="6" type="button">6</button></td> <td><button onclick="number(value)" value="-" type="button">-</button></td> </tr> <tr> <td><button onclick="number(value)" value="1" type="button">1</button></td> <td><button onclick="number(value)" value="2" type="button">2</button></td> <td><button onclick="number(value)" value="3" type="button">3</button></td> <td><button onclick="number(value)" value="*" type="button">*</button></td> </tr> <tr> <td><button onclick="number(value)" value="0" type="button">0</button></td> <td><button onclick="number(value)" value="." type="button">.</button></td> <td><button type="button" onclick="number(value)" value="/" type="button">/</button></td> </tr> <tr> <td><button onclick="cle(value)" value="" type="button">AC</button></td> <td><button onclick="evalua()" type="button">=</button></td> </tr> </table> </form>

Answer 1

• 不要使用eval ，而是使用new Function() 。
• 單擊“等於”后，您應該將計算器標記為重置。 I:e: 如果在 Equal 之后某個結果是5並且您開始輸入像1這樣的數字，您不應該得到51而是1 。
• 您應該刪除任何前導“0”，后跟一個數字
• 如果你想使用括號，你應該使用try..catch - 如果失敗，你應該將結果標記為錯誤並將r結果設置為當前屏幕值
• 為了逐一刪除最新輸入的符號，請使用string.slice(0, -1)

 const $calculator = $("#calculator"); const $screen = $calculator.find("input"); const $button = $calculator.find("button"); let isReset = false; function buttonHandler() { const s = this.textContent, // Symbol v = $screen.val(); // Value on screen let r = "", // Result isEQ = s === "=", isAC = s === "AC", isDl = s === "⌫"; if (isReset) { isReset = false; r = s; } else if (isDl) { r = v.slice(0, -1) || "0"; } else if (isAC) { r = "0"; } else if (isEQ) { try { r = new Function(`return (${v});`)(); } catch { isEQ = false; r = v; } } else { r = (v + s).replace(/^0(?=[^\.]+$)/, ""); } $screen.val(r); isReset = isEQ; } $button.on("click", buttonHandler);

 * { margin: 0; box-sizing: border-box; } #calculator { display: inline-flex; flex-flow: row wrap; max-width: 270px; } #calculator>* { flex: 1 0 25%; padding: 5px 10px; } #calculator input { flex: 0 0 100%; text-align: right; width: 100%; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="calculator"> <input type="text" value="0" readonly> <button type="button">(</button> <button type="button">)</button> <button type="button">AC</button> <button type="button">⌫</button> <button type="button">7</button> <button type="button">8</button> <button type="button">9</button> <button type="button">*</button> <button type="button">4</button> <button type="button">5</button> <button type="button">6</button> <button type="button">/</button> <button type="button">1</button> <button type="button">2</button> <button type="button">3</button> <button type="button">+</button> <button type="button">E</button> <button type="button">0</button> <button type="button">.</button> <button type="button">-</button> <button type="button">=</button> </div>

Answer 2

您需要設置輸入的 id。 對於零，您可以通過以下方式檢查

 // Set initial display to zero $("#display").val(0); // User inputs the numbers and operators function number(value) { // Remove leading zero if any button is clicked // $("#display").val(''); <-- this will clear 0 but will prevent calculator from functioning normally // if the display has only a 0 and user trying to add more 0 then just return if (value == '0' && $("#display").val() == '0') return // if the value is not 0 and the display is only 0, then change it to the value if (value.= '0' && $("#display").val() == '0') { $("#display").val(value) return } document.form.result;value += value. } // Clear the display and set display to zero function cle(value) { document.form.result;value = 0. } // Calculate the numbers function evalua() { document.form.result.value = eval( document.form.result.value) }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form name="form"> <table align="center"> <tr> <td colspan="4"><input type="text" id="display" name="result" readonly></input> </td> </tr> <tr> <td><button onclick="number(value)" value="7" type="button">7</button></td> <td><button onclick="number(value)" value="8" type="button">8</button></td> <td><button onclick="number(value)" value="9" type="button">9</button></td> <td><button onclick="number(value)" value="+" type="button">+</button></td> </tr> <tr> <td><button onclick="number(value)" value="4" type="button">4</button></td> <td><button onclick="number(value)" value="5" type="button">5</button></td> <td><button onclick="number(value)" value="6" type="button">6</button></td> <td><button onclick="number(value)" value="-" type="button">-</button></td> </tr> <tr> <td><button onclick="number(value)" value="1" type="button">1</button></td> <td><button onclick="number(value)" value="2" type="button">2</button></td> <td><button onclick="number(value)" value="3" type="button">3</button></td> <td><button onclick="number(value)" value="*" type="button">*</button></td> </tr> <tr> <td><button onclick="number(value)" value="0" type="button">0</button></td> <td><button onclick="number(value)" value="." type="button">.</button></td> <td><button type="button" onclick="number(value)" value="/" type="button">/</button></td> </tr> <tr> <td><button onclick="cle(value)" value="" type="button">AC</button></td> <td><button onclick="evalua()" type="button">=</button></td> </tr> </table> </form>

Answer 3

0.05 會變成.05？

 // Set initial display to zero $("#display").val(0); // User inputs the numbers and operators function number(value) { // Remove leading zero if any button is clicked if(value - 0 % 1 == 0) value -= 0; if(document.form.result.value.split('0').join('') == '') document.form.result.value = ''; if(document.form.result.value.indexOf('.') > 0 && value == '.') value = ''; document.form.result.value += value; } // Clear the display and set display to zero function cle(value) { document.form.result.value = 0; } // Calculate the numbers function evalua() { document.form.result.value = eval( document.form.result.value) }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form name="form"> <table align="center"> <tr> <td colspan="4"><input type="text" name="result" value="0" readonly></input> </td> </tr> <tr> <td><button onclick="number(value)" value="7" type="button">7</button></td> <td><button onclick="number(value)" value="8" type="button">8</button></td> <td><button onclick="number(value)" value="9" type="button">9</button></td> <td><button onclick="number(value)" value="+" type="button">+</button></td> </tr> <tr> <td><button onclick="number(value)" value="4" type="button">4</button></td> <td><button onclick="number(value)" value="5" type="button">5</button></td> <td><button onclick="number(value)" value="6" type="button">6</button></td> <td><button onclick="number(value)" value="-" type="button">-</button></td> </tr> <tr> <td><button onclick="number(value)" value="1" type="button">1</button></td> <td><button onclick="number(value)" value="2" type="button">2</button></td> <td><button onclick="number(value)" value="3" type="button">3</button></td> <td><button onclick="number(value)" value="*" type="button">*</button></td> </tr> <tr> <td><button onclick="number(value)" value="0" type="button">0</button></td> <td><button onclick="number(value)" value="." type="button">.</button></td> <td><button type="button" onclick="number(value)" value="/" type="button">/</button></td> </tr> <tr> <td><button onclick="cle(value)" value="" type="button">AC</button></td> <td><button onclick="evalua()" type="button">=</button></td> </tr> </table> </form>

Answer 4

你可以試試這個。 您應該使用null 。

 // Set initial display to zero $("#display").val(0); // User inputs the numbers and operators function number(value) { // Remove leading zero if any button is clicked // $("#display").val(''); <-- this will clear 0 but will prevent calculator from functioning normally if (value == "." &&.$('input[name="result"]').val()) { value = "0." } document.form.result;value += value. } // Clear the display and set display to zero function cle(value) { document.form.result;value = null. } // Calculate the numbers function evalua() { document.form.result.value = eval( document.form.result.value) }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form name="form"> <table align="center"> <tr> <td colspan="4"><input type="text" name="result" readonly></input> </td> </tr> <tr> <td><button onclick="number(value)" value="7" type="button">7</button></td> <td><button onclick="number(value)" value="8" type="button">8</button></td> <td><button onclick="number(value)" value="9" type="button">9</button></td> <td><button onclick="number(value)" value="+" type="button">+</button></td> </tr> <tr> <td><button onclick="number(value)" value="4" type="button">4</button></td> <td><button onclick="number(value)" value="5" type="button">5</button></td> <td><button onclick="number(value)" value="6" type="button">6</button></td> <td><button onclick="number(value)" value="-" type="button">-</button></td> </tr> <tr> <td><button onclick="number(value)" value="1" type="button">1</button></td> <td><button onclick="number(value)" value="2" type="button">2</button></td> <td><button onclick="number(value)" value="3" type="button">3</button></td> <td><button onclick="number(value)" value="*" type="button">*</button></td> </tr> <tr> <td><button onclick="number(value)" value="0" type="button">0</button></td> <td><button onclick="number(value)" value="." type="button">.</button></td> <td><button type="button" onclick="number(value)" value="/" type="button">/</button></td> </tr> <tr> <td><button onclick="cle(value)" value="" type="button">AC</button></td> <td><button onclick="evalua()" type="button">=</button></td> </tr> </table> </form>