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

服务编号：60-69 /您节省了：2.160,00

服务编号：70-79 /您节省了：2.520,00

服务编号：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>

enter image description here

Excel

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>

价格和折扣间隔计算器

1 个答案: