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 0px 1px rgba(0, 0, 0, 0, 0, 0, inset, 0px 1px rgba(0, 0, 0, 0, 0, 0, inset, 0px 1px rgba(0, 0, 0, 0, 0, inset, 0px 1px rgba(0, 0, 0, 0, 0, inset, 0px 1px rgba(0, 0, 0, 0, 0, inset, 0px 1px rgba(0, 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(){ //Native component 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+'%'; }; //Custom component 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; //Decrement--- 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'; } }; //Add++ 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"> <span id="inner1">50</span> </span> <input id="range" type="range" min="0" max="100" step="1" value="50"> </div> <div id="d2"> <input id="btn1" type="button" value="<"> <span id="outer2"> <span id="inner2">50</span> </span> <input id="btn2" type="button" value=">"> </div> Press and hold the button for 0.5 seconds, and it 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 call back once without 16.7ms to achieve animation effect.
Difficulty analysis:
1. This sentence var a = parseFloat(window.getComputedStyle(outer2,null).width)/100;
Used to get the initial value if you use outer2.style.width
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
btn1.onmouseup = 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 Wulin.com more.