input 滑塊功能range javascript方法使用

 

<script>
    var  rangelist=document.querySelectorAll('[type="range"]');
    for(var i=0; i<rangelist.length; i++){
        //獲得當期遍歷的值i並賦值給range
        var range=rangelist[i];
        range.onchange=function(){ //range.onchange= 當input的值發生改變時觸發事件
            //onchange()事件一般用於用戶表單中，例如：當文本框內容發生改變時觸發的事件，或者下拉列表框內容發生改變時觸發的事件等
            this.nextElementSibling.innerHTML=this.value;
            //修改#BOX的背景顏色
            changeBoxBG(); //事件監聽名
        };
    };
    function changeBoxBG(){  //被監聽事件方法屬性
        var R=red.value;
        var G=green.value;
        var B=blue.value;
        box.style.backgroundColor=`RGB(${R},${G},${B})`;
    }
</script>