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

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>