Today I have coded two more special effects: one is made with native input[type=range], and the other is completely customized; the following is the complete code and demonstration:
<!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>
= function(){
//Native component range var inner = ('inner1');
var range = ('range');
= function(){
= ;
= +'%';
};
= function(){
= ;
= +'%';
};
//Custom components var outer2 = ('outer2');
var inner2 = ('inner2');
var btn1 = ('btn1');
var btn2 = ('btn2');
var id,id1;
var value = parseInt();
var a = parseFloat((outer2,null).width)/100;
//reduce--- = function(){
id1 = setTimeout(function change(){
if(value>0) {
value--;
= value;
= (value) * a + 'px';
id = setTimeout(function(){
clearTimeout(id);
change();
},16.7);
}else{clearTimeout(id);}
},500);
};
= function(){clearTimeout(id1);clearTimeout(id)};
= function(){
('a:'+a+','+'value:'+value);
if(value>0){
value--;
= value;
= (value)*a+'px';
}
};
//Add+++ = function(){
id1 = setTimeout(function change(){
if(value<100) {
value++;
= value;
= value * a + 'px';
id = setTimeout(function(){
clearTimeout(id);
change();
},16.7);
}else{clearTimeout(id);}
},500);
};
= function(){clearTimeout(id1);clearTimeout(id)};
= function(){
if(value<100){
value++;
= value;
= value*a+'px';
}
}
}
</script>
</head>
<body>
<form >
<div>
<span class="out">
<span class="in">50</span>
</span>
<input class="ran" type="range" min="0" max="100" step="1" value="50">
</div>
<div >
<input class="b" type="button" value="<">
<span class="out">
<span class="in">50</span>
</span>
<input class="b" type="button" value=">">
</div>
Press and hold the button0.5Second, Will continue to change!
</form>
</body>
</html>
The first implementation is very simple, so I won’t explain it, read the code by myself;
Here we mainly introduce the implementation of the second example:
When we see a requirement or other people's special effects, don't rush to see other people's code. First think about it, how should you achieve it? Put your ideas out first
The implementation principle of this special effect:
1. Nesting a span within a span;
•Outside span: only display width, height, border, no background
•Span inside: the height is the same as the outside, the width is 50% by default. First set the background color to linear gradient
2. The onclick event of the button is relatively simple. Click it to change the width of the span inside and display the number.
3. When the button is onmousedown, start the timer and execute the function change function after 500ms. The change function is a function that calls back itself with setTimeout. It will callback once without 16.7ms to achieve animation effect.
Difficulty analysis:
1. This sentencevar a = parseFloat((outer2,null).width)/100;
Used to get the initial value, if you use
It's not worth it, of course you can also set a fixed value, for example, here it can be set as
var a = 1.3，
Note that the getComputedStyle method is not supported under IE9.
The Element object of IE has the currentStyle property;
2. This sentence
= function(){clearTimeout(id1);
clearTimeout(id)};
It's very important. Without it, onmosedown will be triggered before onclick is triggered. After 500ms, it will start executing, and then the outer timer will be executed;
3. Nothing else is difficult;
This example actually expands to many other applications, such as replacing the middle display with articles, pictures, etc., and then replacing the button with custom ones, the effect will be cool!
If you think I have something bad about writing, please point it out!
The above simple example of JavaScript practical combat (native range and custom special effects) is all the content I share with you. I hope you can give you a reference and I hope you can support me more.