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

Question

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

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

我自己在想 'learning purposes' 这怎么可能，因为使用他们在我网站上提供的相同代码，它不会工作...

;) 谢谢！

更新

我的代码：

<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

That number (%) updates instantaneously to the movement of your mouse when you slide the dot.

有一个名为 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>

Answer 2

这是 HTML5 range element，上面注册了 mousemove 事件。类似于：

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

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

Answer 3

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>

Answer 4

这会起作用：

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

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

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

javascript

php

html

live

instant