如何使用 JavaScript 计算器将“分数”添加到输入区域？
[英]How can I add “Fractions” to input area with JavaScript calculator?
问题描述
I am trying to create a fraction calculator.
我正在尝试创建一个分数计算器。 Being fairly new to javascript I am running into a few problems.作为 javascript 的新手，我遇到了一些问题。 I would like it to be accessible on mobile as well, that being the case I need to have input buttons available.我希望它也可以在移动设备上访问，在这种情况下我需要有可用的输入按钮。 I know what I am trying to do I just don't know how I need to do it.我知道我想做什么我只是不知道我需要怎么做。
When a button is pressed I would like to create a new div with the frac class with the corresponding elements and classes, as well as insert the pressed number into that part of the frac div.当按下按钮时，我想使用带有相应元素和类的 frac class 创建一个新的 div，并将按下的数字插入 frac div 的该部分。 When an operator button is pressed I would like it to push the fraction that is already there over and display the operator and repeats the process for each fraction, I was thinking of using display:flex so they will add one after another.当按下操作员按钮时，我希望它推动已经存在的分数并显示操作员并为每个分数重复该过程，我正在考虑使用 display:flex 以便他们一个接一个地添加。
How should I go about making that happen?我应该如何做到这一点？ Thank you!谢谢！
:root { --box-size: 35px; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: sans-serif; color: #242424; } body { height: 100vh; width: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; }.input-area { display: flex; justify-content: end; align-items: center; }.input-area > * { padding: 0 10px; } /* FRACTION */.frac { display: flex; align-items: center; }.number { height: var(--box-size); width: var(--box-size); text-align: center; line-height: var(--box-size); font-size: 2rem; }.divider { height: 4px; width: 100%; background-color: #292929; border-radius: 10px; }.add { font-size: 2rem; } /* NumPads */.button { height: 40px; width: 50px; border: none; cursor: pointer; background-color: #e6e6e6; border-radius: 3px; }.button:focus { outline: none; }.button:hover { background-color: #ececec; }.num-pads { display: flex; justify-content: center; align-items: center; }.num-pads > *,.numerator-num-pad, .denominator-num-pad { padding: 10px; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Fractions</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="input-area"> <div class="frac"> <div class="number whole-number">2</div> <div class="frac-numbers"> <div class="number numerator">3</div> <div class="divider"></div> <div class="number denominator">8</div> </div> </div> <div class="add">+</div> <div class="frac"> <div class="number whole-number">5</div> <div class="frac-numbers"> <div class="number numerator">1</div> <div class="divider"></div> <div class="number denominator">4</div> </div> </div> <div class="add">+</div> <div class="frac"> <div class="frac-numbers"> <div class="number numerator">7</div> <div class="divider"></div> <div class="number denominator">16</div> </div> </div> </div> <div class="num-pads"> <div class="whole-num-pad"> <table> <tr> <td><input type="button" class="button" value="1"></td> <td><input type="button" class="button" value="2"></td> <td><input type="button" class="button" value="3"></td> </tr> <tr> <td><input type="button" class="button" value="4"></td> <td><input type="button" class="button" value="5"></td> <td><input type="button" class="button" value="6"></td> </tr> <tr> <td><input type="button" class="button" value="7"></td> <td><input type="button" class="button" value="8"></td> <td><input type="button" class="button" value="9"></td> </tr> <tr> <td><input type="button" class="button" value="C"></td> <td><input type="button" class="button" value="0"></td> <td><input type="button" class="button" value="<"></td> </tr> </table> </div> <div class="frac-parts"> <div class="numerator-num-pad"> <table> <tr> <td><input type="button" class="button" value="1"></td> <td><input type="button" class="button" value="2"></td> <td><input type="button" class="button" value="3"></td> </tr> <tr> <td><input type="button" class="button" value="4"></td> <td><input type="button" class="button" value="5"></td> <td><input type="button" class="button" value="6"></td> </tr> <tr> <td><input type="button" class="button" value="7"></td> <td><input type="button" class="button" value="8"></td> <td><input type="button" class="button" value="9"></td> </tr> <tr> <td><input type="button" class="button" value="C"></td> <td><input type="button" class="button" value="0"></td> <td><input type="button" class="button" value="<"></td> </tr> </table> </div> <div class="divider"></div> <div class="denominator-num-pad"> <table> <tr> <td><input type="button" class="button" value="1"></td> <td><input type="button" class="button" value="2"></td> <td><input type="button" class="button" value="3"></td> </tr> <tr> <td><input type="button" class="button" value="4"></td> <td><input type="button" class="button" value="5"></td> <td><input type="button" class="button" value="6"></td> </tr> <tr> <td><input type="button" class="button" value="7"></td> <td><input type="button" class="button" value="8"></td> <td><input type="button" class="button" value="9"></td> </tr> <tr> <td><input type="button" class="button" value="C"></td> <td><input type="button" class="button" value="0"></td> <td><input type="button" class="button" value="<"></td> </tr> </table> </div> </div> </div> </body> </html>
1 个解决方案
解决方案1
0 2020-07-16 02:11:44
I've created a simple example below which will allow the user to click on a fraction and then adjust each part of the selected fraction.我在下面创建了一个简单的示例，它允许用户单击分数，然后调整所选分数的每个部分。
Note: I've used jQuery so if you don't have that currently, I'd suggest adding a reference to it.注意：我使用jQuery ，所以如果您目前没有，我建议添加对它的引用。
The script works by listening for click events on the numpad.该脚本通过侦听数字键盘上的click事件来工作。 It will check the buttons value to determine what needs to happen (Clear, Remove last character, Add character).它将检查按钮值以确定需要发生什么（清除、删除最后一个字符、添加字符）。
I've added in operator buttons that will append an operator field and a new fraction.我在操作员按钮中添加了 append 操作员字段和新分数。 The new fraction can then be selected and updated the same way.然后可以以相同的方式选择和更新新分数。
$(document).on("click", ".frac", function(){ // remove "active" class from all.frac $(".frac").removeClass("active"); // add "active" class to this.frac $(this).addClass("active"); }).on("click", ".whole-num-pad.button", function(){ // whole number button pressed var btnValue = $(this).val(), $target = $(".frac.active.whole-number"), // get the current active frac targetValue = $target.text(); // get the current value of the active frac if(btnValue === "C"){ $target.text(""); // clear target return; } if(btnValue === "<"){ // remove the last character from the current value $target.text(targetValue.substr(0, targetValue.length - 1)); return; } // add btnValue to targetValue // making sure we pass at least 1 as a string so that JS doesn't attempt to "add" $target.text(targetValue + btnValue.toString()); }).on("click", ".numerator-num-pad.button", function(){ // numerator button pressed var btnValue = $(this).val(), $target = $(".frac.active.numerator"), // get the current active frac targetValue = $target.text(); // get the current value of the active frac if(btnValue === "C"){ $target.text(""); // clear target return; } if(btnValue === "<"){ // remove the last character from the current value $target.text(targetValue.substr(0, targetValue.length - 1)); return; } // add btnValue to targetValue // making sure we pass at least 1 as a string so that JS doesn't attempt to "add" $target.text(targetValue + btnValue.toString()); }).on("click", ".denominator-num-pad.button", function(){ // denominator button pressed var btnValue = $(this).val(), $target = $(".frac.active.denominator"), // get the current active frac targetValue = $target.text(); // get the current value of the active frac if(btnValue === "C"){ $target.text(""); // clear target return; } if(btnValue === "<"){ // remove the last character from the current value $target.text(targetValue.substr(0, targetValue.length - 1)); return; } // add btnValue to targetValue // making sure we pass at least 1 as a string so that JS doesn't attempt to "add" $target.text(targetValue + btnValue.toString()); }).on("click", ".operator-button", function(){ var operator = $(this).val(); switch(operator){ case "+": $(".input-area").append('<div class="add">+</div>'); break; case "-": $(".input-area").append('<div class="subtract">-</div>'); break; case "x": $(".input-area").append('<div class="multiply">x</div>'); break; } $(".input-area").append('<div class="frac">\ <div class="number whole-number"></div>\ <div class="frac-numbers">\ <div class="number numerator"></div>\ <div class="divider"></div>\ <div class="number denominator"></div>\ </div>\ </div>'); });
:root { --box-size: 35px; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: sans-serif; color: #242424; } body { height: 100vh; width: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; }.input-area { display: flex; justify-content: end; align-items: center; }.input-area > * { padding: 0 10px; } /* FRACTION */.frac { display: flex; align-items: center; }.frac.active { border:1px solid blue; }.number { height: var(--box-size); width: var(--box-size); text-align: center; line-height: var(--box-size); font-size: 2rem; }.divider { height: 4px; width: 100%; background-color: #292929; border-radius: 10px; }.add, .subtract, .multiply { font-size: 2rem; } /* NumPads */.button, .operator-button { height: 40px; width: 50px; border: none; cursor: pointer; background-color: #e6e6e6; border-radius: 3px; }.button:focus { outline: none; }.button:hover { background-color: #ececec; }.num-pads { display: flex; justify-content: center; align-items: center; }.num-pads > *,.numerator-num-pad, .denominator-num-pad { padding: 10px; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Fractions</title> <link rel="stylesheet" href="style:css"> </head> <body> <div class="input-area"> <div class="frac"> <div class="number whole-number">2</div> <div class="frac-numbers"> <div class="number numerator">3</div> <div class="divider"></div> <div class="number denominator">8</div> </div> </div> <div class="add">+</div> <div class="frac"> <div class="number whole-number">5</div> <div class="frac-numbers"> <div class="number numerator">1</div> <div class="divider"></div> <div class="number denominator">4</div> </div> </div> <div class="add">+</div> <div class="frac"> <div class="number whole-number"></div> <div class="frac-numbers"> <div class="number numerator">7</div> <div class="divider"></div> <div class="number denominator">16</div> </div> </div> </div> <div class="operator-buttons"> <input type="button" class="operator-button" value="+" /> <input type="button" class="operator-button" value="-" /> <input type="button" class="operator-button" value="x" /> </div> <div class="num-pads"> <div class="whole-num-pad"> <table> <tr> <td><input type="button" class="button" value="1"></td> <td><input type="button" class="button" value="2"></td> <td><input type="button" class="button" value="3"></td> </tr> <tr> <td><input type="button" class="button" value="4"></td> <td><input type="button" class="button" value="5"></td> <td><input type="button" class="button" value="6"></td> </tr> <tr> <td><input type="button" class="button" value="7"></td> <td><input type="button" class="button" value="8"></td> <td><input type="button" class="button" value="9"></td> </tr> <tr> <td><input type="button" class="button" value="C"></td> <td><input type="button" class="button" value="0"></td> <td><input type="button" class="button" value="<"></td> </tr> </table> </div> <div class="frac-parts"> <div class="numerator-num-pad"> <table> <tr> <td><input type="button" class="button" value="1"></td> <td><input type="button" class="button" value="2"></td> <td><input type="button" class="button" value="3"></td> </tr> <tr> <td><input type="button" class="button" value="4"></td> <td><input type="button" class="button" value="5"></td> <td><input type="button" class="button" value="6"></td> </tr> <tr> <td><input type="button" class="button" value="7"></td> <td><input type="button" class="button" value="8"></td> <td><input type="button" class="button" value="9"></td> </tr> <tr> <td><input type="button" class="button" value="C"></td> <td><input type="button" class="button" value="0"></td> <td><input type="button" class="button" value="<"></td> </tr> </table> </div> <div class="divider"></div> <div class="denominator-num-pad"> <table> <tr> <td><input type="button" class="button" value="1"></td> <td><input type="button" class="button" value="2"></td> <td><input type="button" class="button" value="3"></td> </tr> <tr> <td><input type="button" class="button" value="4"></td> <td><input type="button" class="button" value="5"></td> <td><input type="button" class="button" value="6"></td> </tr> <tr> <td><input type="button" class="button" value="7"></td> <td><input type="button" class="button" value="8"></td> <td><input type="button" class="button" value="9"></td> </tr> <tr> <td><input type="button" class="button" value="C"></td> <td><input type="button" class="button" value="0"></td> <td><input type="button" class="button" value="<"></td> </tr> </table> </div> </div> </div> <script src="https.//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何使用javascript在计算器中添加小数？ - How can add decimal in calculator with javascript?
Javascript：将键盘输入添加到计算器 - Javascript: Add keyboard input to calculator
我怎样才能让这个 Javascript 计算器工作？ - How can I get this Javascript calculator to work?
有没有办法使用javascript创建输入/输出计算器？ - Is there a way I can create an input/output calculator using javascript?
在将计算器输入传递给运算符 (=) 函数之前，如何在 JavaScript 中实时验证计算器输入？ - How can I validate calculator input in real time in JavaScript before passing it to operator (=) function?
如何让 javascript 计算器中的加减函数正常工作？ - How can I get add and subtract functions in javascript calculator to work correctly?
如何使用 JavaScript 为我的计算器项目创建一个可以添加文本的框？ - How to create a box where I can add text using JavaScript for my calculator project?
JavaScript区域计算器 - JavaScript Area Calculator
如何添加函数以便用户可以输入“p”或“a”来获取矩形的周长或面积？ - How can I add a function so the user can input "p" or "a" to get the perimeter or area of a rectangle?
如何在我的JavaScript / HTML计算器中添加平方根？ - How do I add square root to my JavaScript/HTML calculator?
相关标签