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

今天我又码了两个特效：一个是用原生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（）{//原生组件rangevar 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和自定义特效）简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。