Question

我有一个输入范围滑块，代表时间轴（视频时间轴）：

<form oninput="amount.value=slider.value">
<output>0:00</output>
<input type="range" id="slider" name="rangeInput" min="0" max="60" value="0">                                                       

<output name="amount" id="rangevalue" for="slider">0</output>
</form>

到目前为止，时间表以秒为单位。现在我想把它改成几分钟。通过Javascript，我设法将rangevalue.value更改为我喜欢的任何字符串 - 所以我可以将秒数更改为分钟。问题在于oninput="amount.value=slider.value" - 这条线的作用是当用户更改滑块的值时，它会自动更改输出的值以显示滑块当前所在的时间（以秒为单位）。但现在我想将输出的值改为分钟，所以我尝试了几种方法:(我正在使用＆＃34; 00：＆＃34;就像字符串示例一样）

oninput="amount.value="00:"+slider.value" - 根本不起作用。
我创建了一个Javascript方法：
```
function sliderTimeChanged() {
amount.value ="00:"+ slider.value;
}
```
，格式为：
```
oninput="sliderTimeChanged()"
```
也不起作用。当用户手动更改滑块的值时，如何设置控制amount.value？提前感谢您对此事的任何启示。

Answer 1

第一种方法应该是oninput="amount.value='00:' + slider.value"

Demo.

对于第二种方法，查看控制台窗口会显示amount未定义，实际上amount只是第二个output的名称。您可以将rangevalue替换为第二个id的{{1}}。它适用于内联代码的原因，因为在该上下文中output（这是隐式上下文）引用this，你可以通过字段form访问form中的输入字段（因此name有效）。在某些功能中，amount引用this，因此您无法通过window访问某个字段，而是必须通过name访问该字段。虽然您应该使用id来访问它，因为据我所知，通过document.getElementById访问某些元素作为id的属性仅在现代浏览器中支持。

范围形式oninput功能与输出

1 个答案:

Demo.

Demo 2