Question

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

当您滑动点时，该数字（％）会立即更新为鼠标的移动。

我想知道我自己的'学习目的'是怎么可能的，因为他们在我的网站上提供相同的代码，它将无法工作......

）日Thnx！

更新

我的代码：

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

Answer 1

这将有效：

 <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，他们不会使用他们告诉您的内容。

Answer 2

当您滑动点时，该数字（％）会立即更新为鼠标的移动。

此事件名为mousemove。可能与它有关。

例如：

＆＃13;

document.querySelector(".slider").addEventListener("mousemove", function(e) {
  document.querySelector("#position").innerHTML =
    e.pageX + "x" + e.pageY;
});

＆＃13;

.slider {
  border: 1px solid black;
}

＆＃13;

<div class="slider">Move your mouse over this div</div>
<div id="position"></div>

＆＃13;

Answer 3

这是注册了mousemove事件的HTML5 range element。类似的东西：

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

请查看jsfiddle以便更好地理解：http://jsfiddle.net/a7ztqz10/

Answer 4

当您释放鼠标时会触发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>

我希望我的php / html网站上的JavaScript能够即时更新

4 个答案: