input 滑块功能range javascript方法使用

时间：2022-07-18 21:08:58

input 滑块功能range javascript方法使用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>

相关文章