[英]Remove leading zero from a calculator in jQuery
I'm building a simple calculator with jQuery.我正在用 jQuery 构建一个简单的计算器。 The idea is the display is initially set to zero when onload and also when the clear button is clicked.
这个想法是在加载时以及单击清除按钮时最初将显示设置为零。 When I click any button, the number zero should be replaced with numbers or operator based on what I've clicked.
当我单击任何按钮时,应根据我单击的内容将数字零替换为数字或运算符。 Problem is the number zero is leading next to other numbers and it shouldn't be there unless I clicked decimal button.
问题是数字零在其他数字旁边,除非我单击十进制按钮,否则它不应该在那里。
I've tried some approaches like when any button is clicked (eg 7, +, etc.), replace number zero on display with corresponding button values.我尝试了一些方法,例如当单击任何按钮(例如 7、+ 等)时,将显示的数字零替换为相应的按钮值。 Sadly, doing this will either return correct values but won't add further numbers and operators, or simply stops functioning all together.
可悲的是,这样做要么返回正确的值,但不会添加更多的数字和运算符,或者干脆停止一起运行。
Is there a way to bypass this issue?有没有办法绕过这个问题? Any guidance and tips are greatly appreciated.
非常感谢任何指导和提示。
// 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>
eval
, use new Function()
instead.eval
,而是使用new Function()
。5
and you start typing a number like 1
you should not get 51
but 1
. 5
并且您开始输入像1
这样的数字,您不应该得到51
而是1
。try..catch
- if it fails you should mark the result as faulty and set the r
Result as the current screen valuetry..catch
- 如果失败,你应该将结果标记为错误并将r
结果设置为当前屏幕值string.slice(0, -1)
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>
You need to set the id of the input.您需要设置输入的 id。 For zero, you can check in the following way
对于零,您可以通过以下方式检查
// 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>
0.05 will become.05? 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>
You can try this.你可以试试这个。 You should use
null
.您应该使用
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.