javascript - 如何使用 JavaScript 计算器将 "Fractions"添加到输入区域？-6ren

javascript - 如何使用 JavaScript 计算器将 "Fractions"添加到输入区域？

转载作者：行者123 更新时间：2023-12-01 15:45:41

我正在尝试创建一个分数计算器。作为 JavaScript 的新手，我遇到了一些问题。我希望它也可以在移动设备上访问，在这种情况下，我需要有可用的输入按钮。我知道我想要做什么，只是不知道我需要怎么做。
当按下按钮时，我想使用 frac 类创建一个新的 div，其中包含相应的元素和类，并将按下的数字插入到 frac div 的那部分中。当按下运算符按钮时，我希望它插入已经存在的分数并显示运算符并为每个分数重复该过程，我正在考虑使用 display:flex 以便他们将一个接一个地添加。
我该怎么做才能做到这一点？谢谢!

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

最佳答案

我在下面创建了一个简单的示例，它允许用户单击一个分数，然后调整所选分数的每个部分。
注意:我用过 jQuery因此，如果您目前没有，我建议您添加对它的引用。
该脚本通过监听 click 起作用。小键盘上的事件。它将检查按钮值以确定需要发生什么(清除、删除最后一个字符、添加字符)。
我添加了运算符按钮，这些按钮将附加一个运算符字段和一个新分数。然后可以以相同的方式选择和更新新的分数。

$(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>

关于javascript - 如何使用 JavaScript 计算器将 "Fractions"添加到输入区域？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/62925428/

文章推荐： javascript - DiscordJS Canvas 附件未完全发送？

文章推荐： javascript - Laravel Mix 和 Turbolinks

winapi - 我应该如何处理 Direct2D 应用程序中的更新矩形/区域/区域？
在使用 GDI 进行图形处理的传统 Windows 程序中，您必须担心只绘制需要重绘的窗口区域；这是“更新矩形”，可以通过 PAINTSTRUCT.rcPaint 或通过调用 GetUpdateRec
TFS 混淆了团队、区域、项目、区域、迭代
我对 TFS 中的所有内容感到困惑。有人可以解释一下所有这些是如何组合在一起的吗？团队项目合集团队项目团队地区迭代来自 this page,我认为一个(团队)项目集合可以包含多个(团队)项
amazon-web-services - 区域/边缘优化 API 网关 VS 区域/边缘优化自定义域名
这对我来说根本没有意义。创建新的 API 网关时，您可以指定它是区域优化的还是边缘优化的。但话又说回来，当您为 API Gateway 创建自定义域名时，您可以在两者之间进行选择。最糟糕的是，您可以
vba - 循环遍历工作表中的区域/区域？
我有一个工作表，其中包含我想循环遍历的许多不同区域。我将进行一些计算，并认为它比在列中逐个单元格地更快/更有效。我尝试了一些不同的东西，但不知道如何跳到下一个区域。我已经发表了一些评论，最有希望的是
TFS 区域、优化定义和配置
最近迁移到 TFS 2010 后，我想知道对于区域而言，最佳或最广泛接受的定义或配置是什么？我能在网上找到的唯一有用的文章是 this one并且是我认为是正确的。然而，这让我开始思考是否以下任何一
Azure 生命周期管理 - 区域
我在“北欧”有一个存储帐户，现在我想使用生命周期管理将冷 blob 移动到存档层。但是我每次尝试都会遇到以下失败:无法为存储帐户“myStorageAccount”添加生命周期管理规则。错误:管理策
java 项目 - 区域
我正在开发一个项目，您在扫描仪中输入州的缩写，然后程序会告诉您该州位于美国的哪个地区。我认为我的大部分代码都是正确的，但我有以前从未使用过 switch。我已经将我的工作改进为一个错误，即我的第一个
AngularJS View /区域
我正在尝试学习 AngularJS，我想我有一个架构问题。如果我想开始开发一个应用程序，比方说，比如 youtube，我如何在“区域”(比如 Marionette)中组织页面？我的意思是:顶部导航栏
检查指针是否位于 malloc 区域？
我正在制作一个动态内存分配器，当我释放其中的一部分时，我需要检查我传递给函数的指针实际上是否在该区域内。我有一个指向 malloc 区域开头的指针 typedef unsigned char byte
javascript - 突出显示<区域>
有时我想看看到底在哪里页面上图片上的标签。在 Javascript 中有没有办法改变颜色或隐藏与区域标签对应的图像部分？最佳答案也许您正在寻找类似 mapper.js 的内容.它允许您在鼠标
javascript - 如何向图表添加高亮标记/区域？
我有一个使用 D3 js 创建的时间序列图表。我想为特定时间间隔添加高亮区域，以显示在该特定时间发生的特定事件(会有不同类型的事件，因此每个高亮标记将根据其类型具有不同的颜色)。我希望这个突出显示区域
php - 无法使用密码保护页面/区域
我正在尝试创建网站的密码保护区。我想通过检查 MySql 表中的用户名和密码来允许访问，然后启动一个 session 并允许在 session 处于事件状态时访问多个页面。如果有人尝试直接访问这些页面
ios - ScrollView 区域
在 ScrollView 中我添加了几个按钮。正如您在图片中看到的，2 个按钮完全可见，第三个按钮半可见。当我向右滚动看到第三个时；1-如果滚动条很短，则它会滚动回到第一个位置。2- 如果滚动足够则显
ios - 叠加场景/区域
我正在开发我的第一个 spritekit 应用程序，并且有一个关于如何处理我想到的事情的快速问题。我正在制作一个我想要的棋盘游戏原型(prototype)，并希望在 iOS map 中进行一些集思广益
c# - 区域 - 日期和时间问题
在我的 C# 程序中，我收到这样的日期和时间:DateTime.Now 我得到:19/09/2010 20:10:30 因为我的地区是:希伯来语(以色列) 但是如果我将我的程序安装在区域为 Engli
c# - 区域/结束区域预处理器
有时我在 Visual Studio 的源文件中运行(在我的例子中是 2010)，我看到很多区域，我必须点击 + 号才能一个一个地打开它们! 是否有任何快捷方式或菜单选项可以使这对我来说更容易，并且对
android - 试用期间存储文件的最佳位置/区域
关闭。这个问题是opinion-based .它目前不接受答案。想要改进这个问题？更新问题，以便 editing this post 可以用事实和引用来回答它. 关闭 7 年前。 Improve
algorithm - 在二维数据中查找峰值(区域)
我正在寻找二维数据中的峰值区域(如果您愿意，灰度图像或二维景观，通过霍夫变换创建)。峰值区域是指局部最大峰值，但不是单个点而是周围的一部分strong>contributing region 随之而
Java - 将字符或字符串转换为形状/区域
我希望能够将任何字符或字符串转换为形状或区域，以便我可以按照我喜欢的任何大小、样式、效果等来绘制该字符。更具体地说，我将使用视差绘制它，以便它仅在特定角度清晰定义(这就是为什么我不能使用 html
java - 仅渲染与主圆相交的圆的段/区域
我非常喜欢数学(或者你们大多数人会说的“数学”!)，但我还没有达到知道这个问题答案的程度。我有一个主圆，它可以在显示器上的任何 x 和 y 处有一个中心点。其他圆圈将随意在显示器周围移动，但在任何给定

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 如何使用 JavaScript 计算器将 "Fractions"添加到输入区域？