The ultra-Simplified JavaScript spring vibrator fully complies with the conservation of energy and the Hu ke theorem.

The last version used physical thoughts. This time it used mathematical ideas. If you have downloaded the first version of the code, you will obviously feel the power of mathematics !!!!!
Here is the JS Code of spring:
Copy codeThe Code is as follows:
<Script type = "text/javascript">
/// // This spring begin /////////////////////
Var X = 0.1 // X axis Increment
Var T = 0; // the initial position of the X axis
Var M = 200; // The original amplitude multiple.
Var A = 0.7; // the attenuation of an amplitude multiple.
Var D = 'R'; // direction of motion
Var O = 0; // Element
Var L = 0; // location
Var TI = 30;
Var S = false;
Var HR = false;

Function R (){
HR = true;
If (S)
{
Return;
}
O. style. left = L + (Math. sin (T) * M + "px"; // get the spring moving speed
T = T + X; // X axis Growth
M-= A; // unit time attenuation
If (M <= 0) // The amplitude is zero.
{
S = true;
Return; // exit
}
SetTimeout ("R ()", TI); // callback
}
/// // This spring over ////////////////// /////////
Function I ()
{
If (HR ){
Return;
}
S = false;
O = document. getElementById ("div ");
X = parseFloat (document. getElementById ("X"). value );
M = parseFloat (document. getElementById ("M"). value );
A = parseFloat (document. getElementById ("A"). value );
TI = parseFloat (document. getElementById ("TI"). value );
L = document. getElementById ("div"). offsetLeft;
R ();
}
Function TS ()
{
S = true;
}
Function B ()
{
If (S)
{
T = 0
HR = false;
S = false;
X = parseFloat (document. getElementById ("X"). value );
M = parseFloat (document. getElementById ("M"). value );
A = parseFloat (document. getElementById ("A"). value );
Document. getElementById ("div"). style. left = L + "px ";
}
}

</Script>

Here is the HTML in the webpage (useless, for demonstration)
Copy codeThe Code is as follows:
<Div id = "P" style = "width: 500px; height: 400px;">
<Input style = "width: 50px" type = "text" id = "X" value = "0.1"/> X axis increments <br/> <input style = "width: 50px "type =" text "id =" M "value =" 200 "/> original amplitude multiple <br/>
<Input style = "width: 50px" type = "text" id = "A" value = "0.7"/> amplitude multiple attenuation <br/>
<Input style = "width: 50px" type = "text" id = "TI" value = "30"/> running interval (MS) <br/>
<Input style = "width: 80px" type = "button" onclick = "TS () "value =" stop "/> after stopping, please activate again <br/> <input style =" width: 80px "type =" button "onclick =" B () "value =" reactivate "/>
</Div> <div style = "position: absolute;"> <div id = "div" onclick = "I ()" value = "Click me after setting! "Style =" position: absolute; top:-pixel PX; left: 211px; width: 50px; height: 50px; background-color: # FF0; "> </div>

This is better than the previous code! 100% original!
Reproduced http://www.cnblogs.com/NONE/