Simple Example of JavaScript practice (native range and custom effects), javascriptrange

Simple Example of JavaScript practice (native range and custom effects), javascriptrange

Today I coded two more special effects: one with native input [type = range] and the other with full customization. The following is the complete code and Demonstration:

<! DOCTYPE html> 
The first implementation is very simple, so I will not explain it. I will read the code myself;
Here we mainly introduce the implementation of the second instance:
When we see a requirement or special effects from others, we don't have to rush to see other people's code. Let's first think about how to implement it if you are? Sort out ideas first
How this special effect works:
1. nesting a span in a span;
• Span outside: only the width, height, border, and background are displayed.
• Span: The height is the same as that of the outside, and the width is 50% of the default value. First, set the background color to a linear gradient.
2. The onclick event of the button is relatively simple. Click it to change the span width and display number.
3. when the onmousedown button is enabled, the timer is started and the function change function is executed after Ms. The change function is a function that calls back itself using setTimeout, and it does not call back once in MS to achieve the animation effect.
Difficulties:

1. This sentenceVar a = parseFloat (window. getComputedStyle (outer2, null). width)/100;
Used to obtain the initial value. If you use outer2.style. width
Is not worth it, of course, you can also set a fixed value, for example, here can be set
Var a = 1.3,
Note that the getComputedStyle method is not supported below IE9,
The Element Object of IE has the currentStyle attribute;
2. This sentence
Btn1.onmouseup = function () {clearTimeout (id1 );
ClearTimeout (id )};
It is critical that, without it, the onmosedown will be triggered before The onclick trigger. After ms, the start will be executed, and then the outer timer will be executed continuously;
 
3. Others are not difficult;
This instance is actually extended to many other applications. For example, you can replace the display part in the middle with an article or image, and then change the button to a custom one. The effect will be cool!
If you think I have something bad to write, please point it out!
The simple example of the above JavaScript practice (native range and custom special effects) is all the content shared by the editor. I hope you can give us a reference and support for the customer's house.