-2

这可能听起来有点愚蠢，但他们是如何获得滑块的： http: //demosthenes.info/blog/757/Playing-With-The-HTML5-range-Slider-Input#volume

当您滑动点时，该数字 (%) 会随着鼠标的移动而立即更新。

为了我自己的“学习目的”，我想知道这怎么可能，因为使用他们在我的网站上提供的相同代码，它不会工作......

;) 谢谢！

更新

我的代码：

<label for=fader>Volume</label>
    <input type=range min=0 max=100 value=50 id=fader step=1 onchange="outputUpdate(value)">
    <output for=fader id=volume>50%</output>
    </output>
    <script>
        function outputUpdate(vol) {
            document.querySelector('#volume').value = vol+"%";
        }
    </script>
4

4 回答 4

2

这将起作用：

 <html>
 <label for=fader>Volume</label>
 <input type=range min=0 max=100 value=50 id=fader step=1 oninput="outputUpdate(value)">
 <output for=fader id=volume>50%</output> 
 <script> 
    function outputUpdate(vol) { 
       document.querySelector('#volume').value = vol+"%"; }
 </script>
 </html>

您需要更改onchange为oninput，他们不会使用他们告诉您的内容。

于 2015-03-04T22:29:26.033 回答
0

当您滑动点时，该数字 (%) 会随着鼠标的移动而立即更新。

有这个事件叫mousemove。可能与它有关。

例如：

document.querySelector(".slider").addEventListener("mousemove", function(e) {
  document.querySelector("#position").innerHTML =
    e.pageX + "x" + e.pageY;
});
.slider {
  border: 1px solid black;
}
<div class="slider">Move your mouse over this div</div>
<div id="position"></div>

于 2015-03-04T22:23:25.993 回答
0

这是带有注册 mousemove 事件的HTML5 范围元素。就像是：

$('input').on('mousemove', function() {
    $('.foo').text($(this).val());
});

查看 jsfiddle 以获得更好的理解：http: //jsfiddle.net/a7ztqz10/

于 2015-03-04T22:26:59.763 回答
0

当您释放鼠标时会触发 onchange 事件，以便在他们使用 oninput 事件处理程序的值更改时进行更新。通过检查元素并查看事件侦听器，您可以看到它正在使用 oninput

function outputUpdate(vol) {
document.querySelector('#volume').value = vol;
}
<label for=fader>Volume</label>
<input type=range min=0 max=100 value=50 id=fader step=1 oninput="outputUpdate(value)">
<output for=fader id=volume>50</output>

于 2015-03-04T22:28:57.143 回答