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

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

猜你喜欢

转载自blog.csdn.net/qq_41866516/article/details/95167910
0条评论
添加一条新回复
  
今日推荐