时间戳

首页 > 解决方案 > 仅 HTML/Javascript 3 个范围滑块，总和为 100，2 个单独的数学交互

javascript - 仅 HTML/Javascript 3 个范围滑块，总和为 100，2 个单独的数学交互

问题描述

更新。

Sean Kaat 让我在如何添加输入字段方面朝着正确的方向前进。但是，我仍然不确定如何处理三个范围之间的数学关系。

<!DOCTYPE html>
<html lang='en' class=''>
<head>
<meta charset='UTF-8'>
</head>

<title>Calculator</title>
<h1>Calculator</h1>

<body>

<form>
<Label for="sliderBarOne">Ready</Label>
<input type="range" id="sliderBarOne" min="0" max="100" step="0.01" value="0" oninput="this.form.rangeOne.value=this.value">
<input type="number" id="rangeOne" oninput="this.form.sliderBarOne.value=this.value, updateSum();">
<br>
<Label for="sliderBarTwo">ACW</Label>
<input type="range" id="sliderBarTwo" min="0" max="100" step="0.01" value="0" oninput="this.form.rangeTwo.value=this.value">
<input type="number" id="rangeTwo" oninput="this.form.sliderBarTwo.value=this.value">
<br>
<Label for="sliderBarThree">Extra</Label>
<input type="range" id="sliderBarThree" min="0" max="100" step="0.01" value="0" oninput="this.form.rangeThree.value=this.value">
<input type="number" id="rangeThree" oninput="this.form.sliderBarThree.value=this.value">
<br>Sum: <span id="sum">0</span>
</form>

<script>

document.getElementById("sliderBarOne").addEventListener("input", updateReady);
document.getElementById("sliderBarTwo").addEventListener("input", updateACW);
document.getElementById("sliderBarThree").addEventListener("input", updateExtra);

function updateReady() {
  let readyBox = document.getElementById('sliderBarOne').value;
  let ACWBox = document.getElementById('sliderBarTwo').value; 
  let extraBox = document.getElementById('sliderBarThree').value;

  updateSum();
}

function updateACW() {
  let readyBox = document.getElementById('sliderBarOne').value;
  let ACWBox = document.getElementById('sliderBarTwo').value; 
  let extraBox = document.getElementById('sliderBarThree').value; 

  updateSum();
}

function updateExtra() {
  let readyBox = document.getElementById('sliderBarOne').value;
  let ACWBox = document.getElementById('sliderBarTwo').value; 
  let extraBox = document.getElementById('sliderBarThree').value; 

  updateSum();
}

function updateSum() {
  var sliderOneValue = +document.getElementById('sliderBarOne').value;
  var sliderTwoValue = +document.getElementById('sliderBarTwo').value;
  var sliderThreeValue = +document.getElementById('sliderBarThree').value;
  document.getElementById('sum').innerHTML = sliderOneValue + sliderTwoValue + sliderThreeValue;
}

</script>
</body>
</html>

我想建立两个独立的数学关系，我什至不知道如何开始工作。

我希望 Ready 成为第一个将 ACW 设置为 100-Ready 的号码。所以，如果有 95 Ready，ACW 自动设置为 5。我希望 Extra 设置为 0 启动。 

Ready = 95.00
ACW = 5.00
Extra = 0.00

因此，为了展示 Extra Time 对 Ready 和 ACW 的影响，我希望添加任何 Extra 来调整 Ready 和 ACW，同时保持 Ready 和 ACW = 100。Ready + ACW + Extra 不等于 100。

因此，在 5.00 输入 Extra 时会发生以下情况。

Ready = 90.00
ACW = 10.00
Extra = 5.00

Sean Kaat 建议了一些现在对我不起作用的东西，我不知道为什么。我设置了 updateReady、updateACW 和 updateExtra 的空函数，以便我可以使用它来处理三个单独的数学更改。

标签： javascripthtmlmathslider

解决方案

您说得对，数学量将大幅增加；您要确保按特定顺序设置值。

第一：设置 READY 等于PREVIOUS_READY_VALUE - EXTRA（如果值低于 0，则设置为 0），

然后：设置 ACW 等于100 - (EXTRA + READY),

最后：将input.value每个滑块的设置为上述值

滑块的每个onChange事件都应该进行数学运算，然后相应地更改 html 的值。

推荐阅读