input框range类型拖动条时，实现得到实时反馈

柔光的暖阳◎ 2021-12-11 13:09 305阅读 0赞

## **input框range类型拖动条时，实现得到实时反馈** ##

拿渐变色举例：

background:linear-gradient(0deg,red,blue,yellow)、渐变
    
        <div id="dv2" style="background:linear-gradient(0deg,red,blue,yellow);"></div>
    
        角度：<input id="range" style="width:360px;" type="range" min="0" max="360" value="0" oninput="change2()"
    
        onchange="change2()">
    
        <span id="value">0°</span>
    
        <script type="text/javascript">
    
            function change2(){
    
                var value=document.getElementById('range').value;
    
                document.getElementById('value').innerHTML=value+"°";
    
                document.getElementById('dv2').style.background="linear-gradient("+value+"deg,red,blue,yellow)";
    
            }
    
        </script>

下划线的位置需要注意：

input的两个属性：

*  oninput---该事件在 <input> 或 <textarea> 元素的值发生**改变时**触发。
 *  onchange---该事件在 <input> 或 <textarea> 元素的值发生**改变后**触发。

我们把oninput注释掉只留下onchange调节渐变色角度时，就很卡顿不会连续的改变角度，所以这里我们想要得到实时的反馈就要用oninput事件

即实时调节角度拉条时，会不断的触发oninput事件所以会一直调用change2()方法

而只有当拉动完调节条时，拉条失去焦点时才触发onchange事件所以不连贯

onchange：                                                                         oninput：

![range.gif][]      ![range2.gif][]

[range.gif]: https://img-blog.csdnimg.cn/20190709104058413.gif
[range2.gif]: /images/20211211/184b7b56694b481f9abdd316c6f84116.png