Калькулятор интервалов цен и скидок

Question

Этот код ниже применяет процентную скидку.

Как можно настроить применение интервалов скидки в долларах? (согласно приложенным изображениям и файлам Excel)

Пример:

N ° Услуги: 0-9 / Вы экономите: 0

N ° Услуги: 10-19 / Вы Экономия: 360,00

N ° Услуги: 20-29 / Вы экономите: 720,00

N ° Услуги: 30-39 / Вы экономите: 1,080,00

N ° Услуги: 40-49 / Вы экономите: 1.440,00

N ° Услуги: 50-59 / Вы экономите: 1.800,00

N ° Услуги: 60-69 / Вы Экономия: 2,160,00

N ° Услуги: 70-79 / Вы экономите: 2,520,00

N ° Услуги: 80-89 / Вы экономите: 2,880,00

Количество услуг: 90-99 / Вы экономите: 3.240,00

window.onload = function () {
  var $ = function (selector) {
    return document.querySelector(selector);
  };
  var update = function () {
    var amount = $range.value;
    var cost = 10;
    var percent = 30;
    var discount = (amount * (percent / $range.max)).toFixed(2);
    var total = cost * amount - discount / 10 * amount;
    $amount.innerHTML = 'Number of Sharpenings: ' + amount;
    $discount.innerHTML = 'Discount: ' + discount + '%';
    $total.innerHTML = 'Total: $' + total.toFixed(2);
  };
  var $range = $('.range');
  var $amount = $('.amount');
  var $discount = $('.discount');
  var $total = $('.total');
  update();
  $range.addEventListener('input', update);
  $range.addEventListener('change', update);
};

<style class="INLINE__ID">
.wrapper {
  max-width: 600px;
  width: 100%;
  margin: 0 auto;
}
.wrapper .range {
  width: 100%;
}
.wrapper .discount {
  color: #999;
  border-bottom: 1px solid #efefef;
  padding-bottom: 15px;
}
</style>

<div class="wrapper">
<h1 class="title">Price Calculator</h1>
<h3 class="amount">Number of Sharpenings: 100</h3>
<input class="range" type="range" min="0" max="100" value="0" step="1">
<h3 class="discount">Discount: 30.00%</h3>
<h2 class="total">Total: $700.00</h2>
</div>

введите описание изображения здесь

введите описание изображения здесь

введите описание изображения здесь

введите описание изображения здесь

введите описание изображения здесь

введите описание изображения здесь

введите описание изображения здесь

Excel

Answer 1

Используйте математику в свою пользу. В действительности таблица «Сохранить скобки» - это функция, которая увеличивает значение на 360 каждые 10 шагов:

y = (x \ 10) * 360

, которую можно перевести на:

function getSaveAmount(count){
  return Math.floor(count / 10) * 360;
}

Если она становится более сложной, вы можете поместите эти скобки в массив со значениями, представляющими собой целые скидки, наборы, используйте переключатель / регистры, если это, и т. д. c ..

window.onload = function () {
  var $ = function (selector) {
    return document.querySelector(selector);
  };

  var getSaveAmount = function (count){
    return Math.floor(count / 10) * 360;
  }

  var update = function () {
    var amount = $range.value;
    var cost = 10;
    var percent = 30;
    var discount = (amount * (percent / $range.max)).toFixed(2);
    var total = cost * amount - discount / 10 * amount;
    $amount.innerHTML = 'Number of Sharpenings: ' + amount;
    $discount.innerHTML = 'Discount: ' + discount + '%';
    $total.innerHTML = 'Total: $' + total.toFixed(2);
    $save.innerHTML = 'Total: $' + getSaveAmount(amount).toFixed(2);
  };
  var $range = $('.range');
  var $amount = $('.amount');
  var $discount = $('.discount');
  var $total = $('.total');
  var $save = $('.save');
  update();
  $range.addEventListener('input', update);
  $range.addEventListener('change', update);
};

<style class="INLINE__ID">
.wrapper {
  max-width: 600px;
  width: 100%;
  margin: 0 auto;
}
.wrapper .range {
  width: 100%;
}
.wrapper .discount {
  color: #999;
  border-bottom: 1px solid #efefef;
  padding-bottom: 15px;
}
</style>

<div class="wrapper">
<h1 class="title">Price Calculator</h1>
<h3 class="amount">Number of Sharpenings: 100</h3>
<input class="range" type="range" min="0" max="100" value="0" step="1">
<h3 class="discount">Discount: 30.00%</h3>
<h2 class="total">Total: $700.00</h2>
<p class="save">Save: </p>
</div>