divと3つのスライドバー、つまり入力タイプ=範囲があります。 スライドバーをドラッグすると、divの背景色が変更されます。 私は 'onchange'イベントを使用してthis.valueと数値の2つのパラメータを持つ関数を呼び出しました。 divの背景色を設定します 3つのスライドバーは、0〜255の範囲で 'rgb'値を表します。 これまでのところこれが機能しています。onmousedownとonchangeを一緒に使う方法
しかし、私はそれが働く方法は、今起こっているものではありません。 スライドバーをドラッグすると、色は変化せず、 'onmouseup'アクションが発生したときに変更されます。 スライドバーをドラッグしているときに色を変更したい。
<html>
<head>
<script>
var r=0;
var g=0;
var b=0;
function set(){
r=g=b=128;
document.getElementById('div').style.backgroundColor="rgb("+r+","+g+","+b+")";
}
function change(val,bar){
if (bar==1){
r=val;
}
if (bar==2){
g=val;
}
if (bar==3){
b=val;
}
document.getElementById('div').style.backgroundColor="rgb("+r+","+g+","+b+")";
}
</script>
</head>
<body onload="set()">
<div id="div" style="width:400px;height:100px;">
</div>
<table border="">
<tr><td>red</td><td><input id="r_slide" type="range" style="width:200px" min="0" max="255" onchange="change(this.value,1)"></td></tr>
<tr><td>blue</td><td><input id="g_slide" type="range" style="width:200px" min="0" max="255" onchange="change(this.value,2)"></td></tr>
<tr><td>green</td><td><input id="b_slide" type="range" style="width:200px" min="0" max="255" onchange="change(this.value,3)"></td></tr>
</table>
</body>
</html>