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

Posted 2023-05-08

【中文标题】计算滑块在一定数量后增加

【英文标题】：Calculation Slider to increase after certain number

【发布时间】：2020-12-23 21:25:06

【问题描述】：

我有一个计算 (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>

【问题讨论】：

好像 if/else 是你需要的？？？

【参考方案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>

【讨论】：

感谢您的回复，这与我想要实现的目标很接近。我正在寻找的是在总值为 7000 之后，下一步应该是 7040 而不是 7035 或 8040。在您的情况下，它是 8040，因为它会重新计算整个方程。我只是希望它在 7000 之后增加。而不是总数本身。希望你能理解。