Fatal编程技术网
  • javascript/
  • HTML/Javascript仅3个范围滑块，总计100，2个单独的数学交互

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

javascript html math

HTML/Javascript仅3个范围滑块，总计100，2个单独的数学交互,javascript,html,math,slider,Javascript,Html,Math,Slider,已更新。 Sean Kaat在如何添加输入字段方面为我指明了正确的方向。然而，我仍然不确定如何处理这三个范围之间的数学关系 <!DOCTYPE html> <html lang='en' class=''> <head> <meta charset='UTF-8'> </head> <title>Calculator</title> <h1>Calculator</h1> <bo

已更新。

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>
因此，为了演示额外时间对就绪和ACW的影响，我希望在保持就绪和ACW=100的同时，增加额外时间来调整就绪和ACW。就绪+ACW+额外不等于100

因此，在5.00额外输入时会发生以下情况

Ready = 90.00
ACW = 10.00
Extra = 5.00
肖恩·考特提出了一些目前对我不起作用的建议，我不知道为什么。我有updateReady、updateACW和updateExtra set的空函数，因此我可以使用它来处理三个单独的数学变化

你是对的，数学量将大幅增加；您需要确保按特定顺序设置值

第一：将READY设置为等于上一个_READY_值-EXTRA（如果该值低于0，只需将其设置为0）

然后：将ACW设置为等于
100-（额外+准备就绪）

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

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

我刚刚意识到，我正在寻找的内容实际上有点不完整。90+5+10 != 100啊。基本上，我希望Ready+Extra被锁定为100，ACW独立于100约束，但仍然添加来自Extra的值。谢谢Sean。能给我一个小的启动码吗？我还是个新手，不知道如何开始设置初始值。当然：要获得输入框，请使用：
让inputBox=document.getElementById（[classNameString]）
，然后使用：
inputBox.value=NumberSet
访问/设置滑块的数值，非常感谢。我很感激。
函数getValues（）{let readyBox=document.getElementById（'sliderBarOne'）；let ACWBox=document.getElementById（'sliderBarTwo'）；let extraBox=document.getElementById（'sliderBarThree'）；let _ready=readyBox.value-extraBox.value；if（_ready<0）{u ready=0；}let _ACW=100-（extraBox.value+readyBox.value）；readyBox.value=\u ready；ACWBox.value=\u ACW；}
谢谢！我现在已经让输入字段工作了，并且仍然对它们进行求和。额外
求和：0 document.getElementById（“SliderBrone”）.addEventListener（“输入”，updateSum）； 
Ready = 90.00
ACW = 10.00
Extra = 5.00