JavaScript combat (native range and custom effects) Simple example _javascript tips

I've had two more special effects today: one with native Input[type=range], and another completely customizable; here's the complete code and demo:

<! DOCTYPE html>  

The first implementation is very simple, do not explain, look at the code themselves;

This is mainly about the implementation of the second instance:

When we see a need, or someone else's special effects, do not rush to see someone else's code, first think, if you, how to achieve? Get the idea sorted out first.

The principle of the effect:

1. A span embedded in a span;

* Outside span: Only show wide, high, border, no background

• Inside span: height is the same as outside, width is the default 50%, set the background color to be linear gradient first.

2. Button onclick event is relatively simple, click, change the inside span width and display number

3. When the button onmousedown, start the timer, 500ms after the function change function, and the change function is a settimeout callback itself function, he will not 16.7ms callback once, 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
is not worth it, of course, you can also set a fixed value, such as this can be set to
var a = 1.3,
Note that the getComputedStyle method is not supported IE9 the following
The element object of IE has currentstyle attribute;

2. This sentence
btn1.onmouseup = function () {cleartimeout (ID1);
Cleartimeout (ID)};
The key, without it, before the onclick trigger, will trigger the Onmosedown, after 500ms, start execution, after the execution of the outer timer;

3. Nothing else is a difficulty;
This example is actually extended to many other applications, such as the middle of the display can be replaced with articles, pictures and so on, and then change the button into a custom, the effect will be very cool!

If you think I have written a bad place, welcome to point out!

The above JavaScript actual combat (native range and custom effects) Simple example is a small series to share all the content, hope to give you a reference, but also hope that we support cloud habitat community.