首页 > 代码库 > 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>

 

input 滑块功能range javascript方法使用