需要一些帮助来创建一个 JQuery 计算器 [关闭]答案

【问题标题】：Need some help creating a JQuery Calculator [closed]需要一些帮助来创建一个 JQuery 计算器 [关闭]
【发布时间】：2014-07-30 00:51:34
【问题描述】：

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

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

我知道要使用的表单选择器 :text 但是我不确定如何评估他们输入的数字是否是数字，也不知道如何四舍五入，如何编写 if 和 else 语句。我知道我可以使用 .text() 或 .html() 将结果插入到 div 中。

非常感谢任何帮助..我以前从未做过编程，但我自愿参加，因为这是为了一个好的事业...提前谢谢你，非常感谢..

【问题讨论】：

建议您从研究 javascript Number 对象和 NAN 属性（用于验证数字）和 Math 对象 .round() 方法（用于舍入数字）开始。尝试一些事情，如果您仍然遇到问题，请发布一个包含相关代码和错误的新问题
您好，斯蒂芬，感谢您的回复。你说得对，我认为我的问题太笼统了。我明天会尝试一下，如果遇到任何障碍，我会在这里写下我的代码。谢谢。
要开始使用，请参阅this fiddle
非常感谢您给我一个好的起点，这很有帮助。
需要考虑的一些事情 - 可能是金额的单选按钮（5 美元、10 美元、20 美元等）；您最初是否包含所有选项的隐藏列表，然后仅根据选择显示一个，或者您是否使用 ajax 从服务器获取列表

标签： javascript jquery calculator

【解决方案1】：

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

在输入元素上监听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');


});

Example Fiddle: http://jsfiddle.net/ETjTL/

【讨论】：