需要一些帮助创建一个JQuery计算器

Need some help creating a JQuery Calculator

本文关键字：一个 JQuery 计算器 创建 帮助      更新时间：2023-09-26

我自愿为一个小型非营利组织创建一个影响力计算器，我需要一些关于如何编写它的指导。我尝试创建的计算器类似于这个:http://www.stl.unitedway.org/give/impact-calculator/

我知道html和css，但我是一个完全的新手，当谈到JQuery。我知道我需要的逻辑…首先，使用选择器在输入文本框中选择数字，然后检查它是否是数字。如果是数字，将该数字四舍五入，并在文本框中显示更新后的数字。然后创建一个if else语句来计算他们输入的数字，并根据他们在输入文本下面的div中输入的美元金额输出结果。

我知道要使用的形式选择器:文本，但我不确定如何评估如果他们输入的数字是一个数字，也不确定如何舍入，如何写if和else语句。我知道我可以使用。text()或。html()将结果插入到div中。

我真的很感激任何帮助。我以前从来没有做过编程，但我自愿参加，因为这是一个很好的事业……

我认为一个简单的方法是:

  • 监听输入元素上的keyup事件，然后
  • 判断是否为数字
  • 如果是，应用一个函数将其评级为"低"、"中"或"高"捐赠
  • 如果不是，显示相应的错误信息

标记

<input type="text" id="input" value="5" />
<div id="message"></div>
JavaScript 

$(function () {
    var $input = $("#input");
    var $message = $("#message");
    var messages = {
        "low": "Some message about a low-tier donation",
        "medium": "Some message about a medium-tier donation",
        "high": "Some message about a high-tier donation",
        "error" : "Not a number value :("
    };
    function donationLevel(amt) {
        if (amt <= 25) {
            return "low";
        } else if (amt > 25 && amt <= 50) {
            return "medium";
        } else if (amt > 50) {
            return "high";
        }
    }
    $input.bind({
        'keyup': function () {
            var number = $(this).val();
            var isNumber = !isNaN(number);
            if (isNumber) {
                $message.text(messages[donationLevel(number)]);
            }
            else {
                $message.text(messages["error"]);
            }
        }
    });
    // Since we pre-filled our input with "5", 
    // trigger the keyup so we get our message
    $input.trigger('keyup');

});

示例提琴:http://jsfiddle.net/ETjTL/

相关文章：