gpt4 book ai didi

javascript - 如何在用户更改 slider 值时提交 slider 值,而无需任何按钮?

转载 作者:行者123 更新时间:2023-11-30 20:59:09 26 4
gpt4 key购买 nike

我正在尝试让一个球体 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/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com