计算滑块在一定数量后增加

Question

我有一个计算 (x * y) * 35 的滑块。我想这样做如果 (x * y) = >200 那么它应该是：

(x * y) * 35 + 5

但计算只能在 200 之后进行。例如：

x = 1
y = 50
z = 1750

x = 1
y = 200
z = 7000

x = 1
y = 201
z = 7040

所以基本上这个数字应该增加 35 直到 x * y = >200，然后它应该增加 40。

这是我的代码： html

    <div class="slidecontainer">
      <p>Elever: <span id="saleprice"></span></p>
      <input type="range" min="0" max="100" value="1" class="slider" id="sale">
    </div>


    <div class="slidecontainer">
      <p>Paket sålda: <span id="commission"></span></p>
      <input type="range" min="0" max="200" value="1" class="slider" id="commission_range" step="1">
    </div>


    <div class="outputbox">
      <p>Totalt: <span id="total_commission" ></span>:-</p>
    </div>

css

    .slidecontainer {
  width: 100%;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}
.outputbox p{
    padding-top:20px;
    font-size:30px;
    font-family: Dosis;
}
.slidecontainer p{
  font-size: 25px;
  font-family: Dosis;
}

JS

<script>
var comslider = document.getElementById("sale");
var comoutput = document.getElementById("saleprice");
var salep = document.getElementById("saleprice");
var comp = document.getElementById("commission");
var totalout = document.getElementById("total_commission");
var slider = document.getElementById("commission_range");
var output = document.getElementById("commission");

comoutput.innerHTML = comslider.value; // Display the default slider value
output.innerHTML = slider.value; // Display the default slider value

// Update the current slider value (each time you drag the slider handle)
comslider.oninput = function() {
  comoutput.innerHTML = this.value;
  calcTotalCommission();
}

// Update the current slider value (each time you drag the slider handle)
slider.oninput = function() {
  output.innerHTML = this.value;
  calcTotalCommission();
}

// Update the totalCommision number with current values
function calcTotalCommission(price, percentage) {
  var total = parseInt(salep.innerHTML) * (parseFloat(comp.innerHTML) * 35);
  totalout.innerHTML = total.toFixed(0);
}
</script>

Answer 1

在得到总数后添加一个 IF 检查。如果总数大于 200，则以 40 的倍数再次运行函数，否则如果不大于 200 服务器总数正常。

var comslider = document.getElementById("sale");
var comoutput = document.getElementById("saleprice");
var salep = document.getElementById("saleprice");
var comp = document.getElementById("commission");
var totalout = document.getElementById("total_commission");
var slider = document.getElementById("commission_range");
var output = document.getElementById("commission");

comoutput.innerHTML = comslider.value; // Display the default slider value
output.innerHTML = slider.value; // Display the default slider value

// Update the current slider value (each time you drag the slider handle)
comslider.oninput = function() {
  comoutput.innerHTML = this.value;
  calcTotalCommission();
}

// Update the current slider value (each time you drag the slider handle)
slider.oninput = function() {
  output.innerHTML = this.value;
  calcTotalCommission();
}

// Update the totalCommision number with current values
function calcTotalCommission(price, percentage) {
  var total = parseInt(salep.innerHTML) * (parseFloat(comp.innerHTML) * 35);
  // Check if total is greater than 200 and get new total if so
  if (total > 200) {
    total = parseInt(salep.innerHTML) * (parseFloat(comp.innerHTML) * 40);
  }
  totalout.innerHTML = total.toFixed(0);
}

.slidecontainer {
  width: 100%;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}

.outputbox p {
  padding-top: 20px;
  font-size: 30px;
  font-family: Dosis;
}

.slidecontainer p {
  font-size: 25px;
  font-family: Dosis;
}

<div class="slidecontainer">
  <p>Elever: <span id="saleprice"></span></p>
  <input type="range" min="0" max="100" value="1" class="slider" id="sale">
</div>


<div class="slidecontainer">
  <p>Paket sålda: <span id="commission"></span></p>
  <input type="range" min="0" max="200" value="1" class="slider" id="commission_range" step="1">
</div>


<div class="outputbox">
  <p>Totalt: <span id="total_commission"></span>:-</p>
</div>