如何从一个输入中拆分值然后计算它

Question

我有 2 个输入。第一 - 输入，第二 - 输出。

最多 200 个用户按每个用户 4 美元计算，因此，如果我输入 20 个用户，我会在第二个输入中看到 80 个。

从 201 到 500 的用户数量是假设前 200 个用户支付 4 美元/用户，每增加一个用户支付 1 美元。因此，如果我输入 300 个用户，它会计算 200 x 4 美元，然后加上 100 x 1 美元，总计为 900。

从 501 到 1000 的用户数按每个用户 0.50 美元计算。因此，如果我输入 555 个用户，则计算结果为 200 x 4 美元加上 300 x 1 美元加上 55 x 0.50 美元。总计为 1127.50.

所有超过 1000 用户的数字均按 $0,25 费率计算。

$(document).ready(function() {
  function updatePrice() {
    var price = parseFloat($('#users-count').val());
    if (price <= '200') {
      var total = price * 4;
    } else if (price >= '201' && price <= '500') {
      var total = price * 1;
    } else if (price >= '501' && price <= '1000') {
      var total = price * 0.5;
    } else if (price >= '1000') {
      var total = price * 0.25;
    }
    var total = total.toFixed(0);
    $('#users-price').val(total);
  }
  $(document).on('change, keyup', '#users-count', updatePrice);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="calculator-price-field">
  <input type="number" id="users-count" class="calculator-field" value="1" min="1"><span class="calculator-field-label">users</span>
</div>
<div class="calculator-price-field">
  <input type="number" id="users-price" class="calculator-field" value="1" min="1"><span class="calculator-field-label">USD/month</span>
</div>

This is my codepen

谢谢！！！

Answer 1

绑定多个事件的正确语法是在它们之间放置 space。

像这样：

$(document).ready(function() {
  function updatePrice() {
    var price = parseFloat($('#users-count').val());
    console.log(price);
    if (price <= '200') {
      var total = price * 4;
    } else if (price >= '201' && price <= '500') {
      var total = price * 1;
    } else if (price >= '501' && price <= '1000') {
      var total = price * 0.5;
    } else if (price >= '1000') {
      var total = price * 0.25;
    }
    var total = total.toFixed(0);
    $('#users-price').val(total);
  }
  $(document).on('change keyup', '#users-count', updatePrice);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="calculator-price-field">
  <input type="number" id="users-count" class="calculator-field" value="1" min="1"><span class="calculator-field-label">users</span>
</div>
<div class="calculator-price-field">
  <input type="number" id="users-price" class="calculator-field" value="1" min="1"><span class="calculator-field-label">USD/month</span>
</div>

Answer 2

分别计算每个范围。另外，最后需要检查total是否存在，以避免用户在输入字段中删除值时Uncaught TypeError。

$(document).ready(function() {
  function updatePrice() {
    var price = parseFloat($('#users-count').val());
    var total = 0;
    if (price <= '200') {
      total = price * 4;
    } else if (price >= '201' && price <= '500') {
      total = 800 + (price - 200) * 1;
    } else if (price >= '501' && price <= '1000') {
      total = 1000 + (price - 500) * 0.5;
    } else if (price >= '1000') {
      total = 1250 + (price - 1000) * 0.25;
    }
    total = total ? total.toFixed(0) : 0;
    $('#users-price').val(total);
  }
  $(document).on('change, keyup', '#users-count', updatePrice);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="calculator-price-field">
  <input type="number" id="users-count" class="calculator-field" value="1" min="1"><span class="calculator-field-label">users</span>
</div>
<div class="calculator-price-field">
  <input type="number" id="users-price" class="calculator-field" value="1" min="1"><span class="calculator-field-label">USD/month</span>
</div>

Answer 3

您可以计算每个值，例如：

我也added/updated:

= .toFixed(2); - 这样你就可以有小数点了。您的期望值有小数点。

=添加条件，如果total不存在，清除文本框

function updatePrice() {
  var price = parseFloat($('#users-count').val());

  if (price <= '200') {
    var total = price * 4;
  } else if (price >= '201' && price <= '500') {
    var total = (200 * 4) + ((price - 200));
  } else if (price >= '501' && price <= '1000') {
    var total = (200 * 4) + (300 * 1) + ((price - 500) * .5);
  } else if (price >= '1001') {
    var total = (200 * 4) + (300 * 1) + (500 * .5) + ((price - 1000) * .25);
  }
  var total = total.toFixed(2);

  if (total) $('#users-price').val(total);
  else $('#users-price').val("");
}
$(document).on('change, keyup', '#users-count', updatePrice);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="calculator-price-field">
  <input type="number" id="users-count" class="calculator-field" value="1" min="1"><span class="calculator-field-label">users</span>
</div>
<div class="calculator-price-field">
  <input type="number" id="users-price" class="calculator-field" value="1" min="1"><span class="calculator-field-label">USD/month</span>
</div>

如何从一个输入中拆分值然后计算它

How to split value from one input and then calculate it

html

javascript

math

jquery

calculator