javascript - 价格和折扣间隔计算器

Question

下面的代码适用百分比折扣。

如何调整以应用折扣间隔，以美元为单位？（根据附件图片和Excel文件）

例子 ：

N° Services: 0-9  /  You Save: 0
N° Services: 10-19  /  You Save: 360,00
N° Services: 20-29  /  You Save: 720,00
N° Services: 30-39  /  You Save: 1.080,00
N° Services: 40-49  /  You Save: 1.440,00
N° Services: 50-59  /  You Save: 1.800,00
N° Services: 60-69  /  You Save: 2.160,00
N° Services: 70-79  /  You Save: 2.520,00
N° Services: 80-89  /  You Save: 2.880,00
N° Services: 90-99  /  You Save: 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>

标签： javascripthtmlcss

Answer 1

使用对你有利的数学。实际上，保存括号表是一个每 10 步递增 360 的函数：

y = (x \ 10) * 360

你可以翻译成：

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

如果它变得更复杂，您可以将这些括号放在一个数组中，其值为整个折扣、集合、使用开关/案例、if 等。

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>