这听起来可能有点愚蠢,但他们是如何获得滑块的: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>
这将起作用:
<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
,他们不会使用他们告诉你的内容。
当您滑动点时,该数字(%)会随着鼠标的移动而即时更新。
有一个事件叫做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>
这是HTML5范围元素,上面有注册的mousemove事件
$('input').on('mousemove', function() {
$('.foo').text($(this).val());
});
查看jsfiddle以更好地理解:http://jsfiddle.net/a7ztqz10/
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>