-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

マウスを離すと 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 に答える
0

これは、mousemove イベントが登録されたHTML5 の range 要素です。何かのようなもの：

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

理解を深めるためにjsfiddleを見てください：http://jsfiddle.net/a7ztqz10/

于 2015-03-04T22:26:59.763 に答える