Question

我有一个div和三个滑动条，即输入类型=范围。相应拖动滑动条时，div的背景颜色会发生变化。我曾经使用过＆＃39; onchange＆＃39;调用具有2个参数this.value和数字的函数的事件;设置div的背景颜色三个滑动条代表＆＃39; rgb＆＃39;值范围为0-255。到目前为止，这是有效的。

但我想让它发挥作用的方式并不是现在正在发生的事情。当拖动滑动条时，颜色不会改变，而是在“滑动”时会改变颜色。行动发生了。我希望在拖动滑动条时更改颜色。这是我的代码：

<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>

Answer 1

您可以使用onInput来更改实时更改。请注意，某些版本的IE不支持onInput，因此我将onChange留在那里作为后备来覆盖您的所有基础。

var r=0;
var g=0;
var b=0;

function set() {
    r=g=b=128;
    var div = document.getElementById('div');
    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;
    }

    var div = document.getElementById('div');
    div.style.backgroundColor="rgb("+r+","+g+","+b+")";
}

<html>
<head>
</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" oninput="change(this.value,1)" 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" oninput="change(this.value,2)" 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" oninput="change(this.value,3)" onchange="change(this.value,3)">
            </td>
        </tr>
    </table>
</body>
</html>

Answer 2

您可以使用输入事件处理程序。例如：

<input type="range" oninput="change(this.value,x)">

Answer 3

您可以使用onChange事件，而不是在更改发生后触发的onInput。（more info）。

需要注意的是，onInput（就像input:type=range）在IE8及以下版本，以及Opera 9及以下版本中都不可用。

<table border="">
     <tr><td>red</td><td><input id="r_slide" type="range" style="width:200px" min="0" max="255"  oninput="change(this.value,1)"></td></tr>
     <tr><td>blue</td><td><input id="g_slide" type="range" style="width:200px" min="0" max="255" oninput="change(this.value,2)"></td></tr>
     <tr><td>green</td><td><input id="b_slide" type="range" style="width:200px" min="0" max="255" oninput="change(this.value,3)"></td></tr>
 </table>

jsFiddle

如何一起使用onmousedown和onchange

3 个答案: