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

I want my JavaScript on my php/html website to update live and instantaneously

本文关键字：JavaScript 实时更新 网站 我的 php html 我希望      更新时间：2023-09-26

这听起来可能有点愚蠢，但他们是如何获得滑块的：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>

相关文章：