JavaScript实战（原生range和自定义特效）

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

#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; } 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

50

50 ">

按住按钮0.5秒, 会持续变化!

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

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

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

该特效的实现原理：

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. 其它的都不是难点；

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

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