JavaScript实战(原生range和自定义特效)简单实例

2019-11-20 09:11:10

字体：大中小

来源：转载

供稿：网友

今天我又码了两个特效：一个是用原生input[type=range]的，另一个完全自定义的；下面是完整代码和演示：

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title></title>  <style>    #tip{      position: absolute;      top: 30px;      left: 0;      right: 0;      width: 200px;      height: 160px;      margin: auto;      border: 1px solid gray;      background-color: cornsilk;    }    #tip div{      position: relative;      width: 100%;      height: 80px;      border-bottom: 1px solid gray;    }    .out{      position: relative;      left: 16%;      display: inline-block;      border: 2px solid royalblue;      margin-top: 20px;      width: 130px;      height: 20px;      background-color: lightgoldenrodyellow;    }    .in{      display: block;      height: 20px;      line-height: 20px;      text-align: right;      color: white;      width: 50%;      background-image: linear-gradient(to right,powderblue 0%,#336699 50%,red 100%);      -webkit-user-select: none;      -moz-user-select: none;      -ms-user-select: none;      user-select: none;    }    input[type="range"] {      position: relative;      left: 19%;      top: 5px;      box-shadow: 0 1px 0 0px #424242, 0 1px 0 #060607 inset, 0px 2px 10px 0px black inset, 1px 0px 2px rgba(0, 0, 0, 0.4) inset, 0 0px 1px rgba(0, 0, 0, 0.6) inset;      background-color: lightskyblue;      border-radius: 15px;      width: 60%;      -webkit-appearance: none;      -moz-appearance: none;      appearance: none;      height:15px;    }    input[type="range"]::-webkit-slider-thumb {      -webkit-appearance: none;      -moz-appearance: none;      appearance: none;      height: 20px;      width: 10px;      background-color: coral;      border-radius: 15px;      -webkit-box-shadow: 0 -1px 1px black inset;      -moz-box-shadow: 0 -1px 1px black inset;      box-shadow: 0 -1px 1px black inset;    }    input[type="range"]:before{      content: attr(value);      color: white;      border-radius: 5px 0 0 5px;      background-color: lightskyblue;    }    input[type="range"]:after{      content: attr(max);      color: white;      border-radius:0 5px 5px 0;      background-color: lightskyblue;    }    .b{      display: inline-block;      width: 22px;      padding: 0;    }    #outer2{left: 5px}    #btn1{      position: relative;      left: 5px;    }    #btn2{      position: relative;      left: 5px;    }  </style>  <script>    window.onload = function(){      //原生组件range      var inner = document.getElementById('inner1');      var range = document.getElementById('range');      range.onclick = function(){          inner.innerHTML = range.value;          inner.style.width = range.value+'%';      };      range.onmousemove = function(){          inner.innerHTML = range.value;          inner.style.width = range.value+'%';      };      //自定义组件      var outer2 = document.getElementById('outer2');      var inner2 = document.getElementById('inner2');      var btn1 = document.getElementById('btn1');      var btn2 = document.getElementById('btn2');      var id,id1;      var value = parseInt(inner2.innerHTML);      var a = parseFloat(window.getComputedStyle(outer2,null).width)/100;      //减---      btn1.onmousedown = function(){        id1 = setTimeout(function change(){              if(value>0) {                value--;                inner2.innerHTML = value;                inner2.style.width = (value) * a + 'px';                id = setTimeout(function(){                  clearTimeout(id);                  change();                },16.7);              }else{clearTimeout(id);}            },500);      };      btn1.onmouseup = function(){clearTimeout(id1);clearTimeout(id)};      btn1.onclick = function(){        console.log('a:'+a+','+'value:'+value);        if(value>0){          value--;          inner2.innerHTML = value;          inner2.style.width = (value)*a+'px';        }      };      //加+++      btn2.onmousedown = function(){        id1 = setTimeout(function change(){          if(value<100) {            value++;            inner2.innerHTML = value;            inner2.style.width = value * a + 'px';            id = setTimeout(function(){              clearTimeout(id);              change();            },16.7);          }else{clearTimeout(id);}        },500);      };      btn2.onmouseup = function(){clearTimeout(id1);clearTimeout(id)};      btn2.onclick = function(){        if(value<100){          value++;          inner2.innerHTML = value;          inner2.style.width = value*a+'px';        }      }    }  </script></head><body>  <form id="tip">    <div>      <span id="outer1" class="out">        <span id="inner1" class="in">50</span>      </span>      <input id="range" class="ran" type="range" min="0" max="100" step="1" value="50">    </div>    <div id="d2">      <input id="btn1" class="b" type="button" value="<">      <span id="outer2" class="out">        <span id="inner2" class="in">50</span>      </span>      <input id="btn2" class="b" type="button" value=">">    </div>    按住按钮0.5秒, 会持续变化!  </form></body></html>

第一个的实现很简单，就不做解释了，自己看代码；

这里主要介绍第二个实例的实现：

在我们看到一个需求，或者别人的特效时，不急着去看别人的代码，先想想，要是你，该怎么实现？先把思路整理出来

该特效的实现原理：

1. 一个span内嵌套一个span；

•外面的span：只显示宽、高、边框，背景无

•里面的span：高度和外面一样，宽度为默认的50%，先设置好背景颜色为线性渐变

2. 按钮的onclick事件比较简单，点一下，就改变里面的span的宽度和显示数字

3. 当按钮的onmousedown时，启动计时器，等500ms后执行函数change函数，而change函数是一个用setTimeout回调自身的函数，他会没16.7ms回调一次，达到动画效果

难点解析：

1. 这一句 var a = parseFloat(window.getComputedStyle(outer2,null).width)/100;
用来获得初始值，如果你用outer2.style.width
是得不到值得，当然你也可以将a设个固定值，比如这里可以设为
var a = 1.3，
注意IE9以下不支持getComputedStyle方法，
IE的Element对象有currentStyle属性；

2. 这一句
btn1.onmouseup = function(){clearTimeout(id1);
clearTimeout(id)};
很关键，没了它，在onclick触发之前，会先触发onmosedown，在500ms后，开始执行，之后一直执行外层的计时器；

3. 其它的都不是难点；
这个实例其实扩展到其它很多应用，比如可以把中间的显示部分替换为文章、图片等等，再把按钮换成自定义的，效果将会很酷的！

如果您觉得我有写的不好的地方，欢迎指出！

以上这篇JavaScript实战(原生range和自定义特效)简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持武林网。

上一篇：原生JS实现图片轮播与淡入效果的简单实例

下一篇：原生JS实现-星级评分系统的简单实例