JavaScript实战(原生range和自定义特效)简单实例
今天我又码了两个特效：一个是用原生input[type=range]的，另一个完全自定义的；下面是完整代码和演示：
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title></title>
<style>
#tip{
position:absolute;
top:30px;
left:0;
right:0;
width:200px;
height:160px;
margin:auto;
border:1pxsolidgray;
background-color:cornsilk;
}
#tipdiv{
position:relative;
width:100%;
height:80px;
border-bottom:1pxsolidgray;
}
.out{
position:relative;
left:16%;
display:inline-block;
border:2pxsolidroyalblue;
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(toright,powderblue0%,#33669950%,red100%);
-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:01px00px#424242,01px0#060607inset,0px2px10px0pxblackinset,1px0px2pxrgba(0,0,0,0.4)inset,00px1pxrgba(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-1px1pxblackinset;
-moz-box-shadow:0-1px1pxblackinset;
box-shadow:0-1px1pxblackinset;
}
input[type="range"]:before{
content:attr(value);
color:white;
border-radius:5px005px;
background-color:lightskyblue;
}
input[type="range"]:after{
content:attr(max);
color:white;
border-radius:05px5px0;
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
varinner=document.getElementById('inner1');
varrange=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+'%';
};
//自定义组件
varouter2=document.getElementById('outer2');
varinner2=document.getElementById('inner2');
varbtn1=document.getElementById('btn1');
varbtn2=document.getElementById('btn2');
varid,id1;
varvalue=parseInt(inner2.innerHTML);
vara=parseFloat(window.getComputedStyle(outer2,null).width)/100;
//减---
btn1.onmousedown=function(){
id1=setTimeout(functionchange(){
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(functionchange(){
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>
<formid="tip">
<div>
<spanid="outer1"class="out">
<spanid="inner1"class="in">50</span>
</span>
<inputid="range"class="ran"type="range"min="0"max="100"step="1"value="50">
</div>
<divid="d2">
<inputid="btn1"class="b"type="button"value="<">
<spanid="outer2"class="out">
<spanid="inner2"class="in">50</span>
</span>
<inputid="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.这一句vara=parseFloat(window.getComputedStyle(outer2,null).width)/100;
用来获得初始值，如果你用outer2.style.width
是得不到值得，当然你也可以将a设个固定值，比如这里可以设为
vara=1.3，
注意IE9以下不支持getComputedStyle方法，
IE的Element对象有currentStyle属性；
2.这一句
btn1.onmouseup=function(){clearTimeout(id1);
clearTimeout(id)};
很关键，没了它，在onclick触发之前，会先触发onmosedown，在500ms后，开始执行，之后一直执行外层的计时器；
3.其它的都不是难点；
这个实例其实扩展到其它很多应用，比如可以把中间的显示部分替换为文章、图片等等，再把按钮换成自定义的，效果将会很酷的！
如果您觉得我有写的不好的地方，欢迎指出！
以上这篇JavaScript实战(原生range和自定义特效)简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。