Question

用户松开滑块时，我正试图让球形浮子回答我的网页，就像在遥控器中一样。然而，由于我几乎没有HTML经验，我无法想出一个解决方案，比如“如果滑块的值发生变化，发布新值（执行提交按钮的功能）”，我可能就像C ++这样的东西蟒。

现在，我的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”的值。

Answer 1

您可以使用onmouseup事件来完成此操作。当用户将鼠标放在滑块上时触发此操作，这意味着当它们完成滑动时会触发它。从那里，您可以让它运行submit功能。我在表单中添加了一个id属性，但您可以通过滑块中的相对选择器导航到它（但这更麻烦）。

＆＃13;

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();
}

＆＃13;

#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;
}

}

＆＃13;

<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>

＆＃13;

当用户更改它的值时，如何在没有任何按钮的情况下提交滑块值？

1 个答案: