使用javascript按下“更改时执行某些操作”

我编写了一些代码来生成RGB颜色，但它在更改后可以工作，但我希望在更改时执行此操作：

<input type="range" id="myNumber" min="0" max="255" onchange="myFunction()" value="0" />
<input type="range" id="myNumber2" min="0" max="255" onchange="myFunction()" value="0" />
<input type="range" id="myNumber3" min="0" max="255" onchange="myFunction()" value="0" />
<p id="demo">Blalalalala</p>

<script>
function myFunction() {
    var x = document.getElementById("myNumber").value;
    var y = document.getElementById("myNumber2").value;
    var z = document.getElementById("myNumber3").value;  
    document.getElementById("demo").style.transition = 'background 0.5s ease 0s';
    document.getElementById("demo").style.background = 'rgb('+x+','+y+','+z+')';
}
</script>

blalala
函数myFunction（）{
var x=document.getElementById（“myNumber”）.value；
var y=document.getElementById（“myNumber2”）.value；
var z=document.getElementById（“myNumber3”）.value；
document.getElementById（“demo”）.style.transition='background 0.5s ease 0s'；
document.getElementById（“demo”）.style.background='rgb（'+x+'，'+y+'，'+z+'）；
}

更新

对于答案，我增加了一个不透明度，如果有人需要，这里是完整的代码

 <p>R (Stands for red):
    <input type="range" id="myNumber" min="0" max="255" step="1" oninput="myFunction()" value="0" /></p>
    <p>G (Stands for green):
    <input type="range" id="myNumber2" min="0" max="255" step="1" oninput="myFunction()" value="0" /></p>
    <p>B (Stands for blue):
    <input type="range" id="myNumber3" min="0" max="255" step="1" oninput="myFunction()" value="0" /></p>
    <p>A (Stands for opacity):
    <input type="range" id="myNumber4" min="0" max="1" step="0.1" oninput="myFunction()" value="1" /></p>




    <p id="demo">sasasasa</p>

    <script>
    document.getElementById("demo").style.background = 'rgb(0,0,0,1)';
    function myFunction() {
        var x = document.getElementById("myNumber").value;
        var y = document.getElementById("myNumber2").value;
        var z = document.getElementById("myNumber3").value; 
        var a = document.getElementById("myNumber4").value;     
        document.getElementById("demo").style.transition = 'background 0.5s ease 0s';
        document.getElementById("demo").style.background = 'rgba('+x+','+y+','+z+','+a+')';
    }
    </script>

R（代表红色）：

G（代表绿色）：

B（代表蓝色）：

A（代表不透明度）：

萨萨萨萨

document.getElementById（“demo”）.style.background='rgb（0,0,0,1）'； 函数myFunction（）{ var x=document.getElementById（“myNumber”）.value； var y=document.getElementById（“myNumber2”）.value； var z=document.getElementById（“myNumber3”）.value； var a=document.getElementById（“myNumber4”）.value； document.getElementById（“demo”）.style.transition='background 0.5s ease 0s'； document.getElementById（“demo”）.style.background='rgba（'+x+'、'+y+'、'+z+'、'+a+'）； } 使用HTML5事件而不是事件

blalala
函数myFunction（）{
var x=document.getElementById（“myNumber”）.value；
var y=document.getElementById（“myNumber2”）.value；
var z=document.getElementById（“myNumber3”）.value；
document.getElementById（“demo”）.style.transition='background 0.5s ease 0s'；
document.getElementById（“demo”）.style.background='rgb（'+x+'，'+y+'，'+z+'）；
}

onchange

应仅在用户释放鼠标时触发。要获得持续更新，您应该使用

oninput

事件，该事件将从鼠标和键盘捕获Firefox、Safari和Chrome中的实时更新

但是，IE10不支持oninput，因此最好将两个事件处理程序组合在一起，如下所示：

<input type="range" id="myNumber" min="0" max="255" onchange="myFunction()" oninput="myFunction()" value="0" />

如果您喜欢这个答案，您觉得如何。另有说明。IE9得到了部分支持。IE10已经给出了完整的答案，我认为这个答案更好，因为它解释了

onchange

和

oninput