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