码迷,mamicode.com
首页 > 编程语言 > 详细

input 滑块功能range javascript方法使用

时间:2016-11-12 14:14:31      阅读:143      评论:0      收藏:0      [点我收藏+]

标签:color   range   事件   selector   function   ++   htm   change   gre   

技术分享技术分享

 

<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方法使用

标签:color   range   事件   selector   function   ++   htm   change   gre   

原文地址:http://www.cnblogs.com/longly/p/6056452.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!