我试图让球体 float 器在用户释放 slider 后立即响应我的网页，就像在 Remote 中一样。然而，由于我在 HTML 方面几乎没有经验，我无法想出像“如果 slider 的值发生变化，发布新值(执行提交按钮的操作)”之类的解决方案，就像我可能可以在 C++ 或Python。
现在，我的 HTML 代码如下:
<!DOCTYPE html>
<html>
<style>
#slidecontainer {
width: 100%;
}
.slider {
-webkit-appearance: none;
-webkit-transform: rotate(270deg);
width: 250px;
height: 10px;
position:absolute;
top:50%;
left:50%;
left:30px;
top:300px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
}
</style>
<body>
<h1 style="color:blue;">Floating spheres</h1>
<p>Use slider to change sphere's height.</p>
<FORM action="/" method="post">
<P>
<input type="range" name="POT" min="0" max="100" value="50" class="slider" id="myRange">
<p>Power: <span id="demo"></span>%</p><br>
<INPUT type="submit" name="Send">
</P>
</FORM>
<script>
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;
slider.oninput = function() {
output.innerHTML = this.value;
}
</script>
</body>
</html>
编辑:
我现在没有太多时间深入研究 HTML，因此非常感谢直接的答案。
我想更改“myRange”的值。
最佳答案
您可以通过使用 onmouseup 事件来完成此操作。当用户在 slider 上释放鼠标时会触发此操作，这意味着当用户完成滑动时会触发此操作。从那里，您可以让它运行 submit 函数。我向表单添加了一个 id 属性，但您可以通过 slider 中的相对选择器导航到它(但这更困惑)。
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;
slider.oninput = function() {
output.innerHTML = this.value;
}
slider.onmouseup = function () {
document.getElementById("form").submit();
}#slidecontainer {
width: 100%;
}
.slider {
-webkit-appearance: none;
-webkit-transform: rotate(270deg);
width: 250px;
height: 10px;
position:absolute;
top:50%;
left:50%;
left:30px;
top:300px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
}<h1 style="color:blue;">Floating spheres</h1>
<p>Use slider to change sphere's height.</p>
<FORM action="/" method="post" id="form">
<P>
<input type="range" name="POT" min="0" max="100" value="50" class="slider" id="myRange">
<p>Power: <span id="demo"></span>%</p><br>
<INPUT type="submit" name="Send">
</P>
</FORM>关于javascript - 当用户更改 slider 值时，如何在没有任何按钮的情况下提交 slider 值？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47297889/