JavaScript method for simulating parabolic motion in gravity state
This article mainly introduces the method of simulating the parabolic motion of JavaScript in the gravity state. The example analyzes the method of simulating the movement of javascript dom elements, which has some reference value. If you need it, you can refer to it.
This article describes how to simulate the parabolic motion in the gravity state using JavaScript. Share it with you for your reference. The specific analysis is as follows:
This JavaScript code simulates the parabolic motion in the gravity state. You can set the following parameters: horizontal initial velocity, vertical initial velocity, and gravity acceleration (if this acceleration is a time-varying value, can achieve other non-uniformly accelerated motion effects), animation interval, etc., relatively professional
The Code is as follows:
<! Doctype html>
<Html>
<Head>
<Title> js parabolic motion </title>
<Meta charset = "UTF-8"/>
<Style type = "text/css">
* {Padding: 0; margin: 0 ;}
Body {font-size: 13px; padding: 10px ;}
P {margin: 2px ;}
. Wrap {position: relative; width: 1000px; height: 550px; margin: 0 auto; border: 1px solid # ccc; margin-top: 50px ;}
# Fall {width: 20px; font-size: 1px; height: 20px; background: #000; position: absolute; top: 0; left: 0 ;}
</Style>
</Head>
<Body>
<H3> simulate the parabolic motion under the gravity state (if 1px = 1mm) <P> horizontal initial speed: <input id = "Vx" type = "text" value = "2"/> px/ms </p>
<P> vertical initial speed: <input id = "Vy" type = "text" value = "-2"/> px/ms </p>
<P> acceleration of gravity: <input id = "a" type = "text" value = "0.0098"/> px/square ms </p>
<P> (if the acceleration is a time-varying value, other non-uniformly accelerated motion can be achieved .) </P>
<P> unit time: <input id = "t" type = "text" value = "10"/> (recording the interval of motion)
<P> <input type = "button" value = "demo" onclick = "demo (document. getElementById ('vx '). value, document. getElementById ('vy '). value, document. getElementById ('A '). value, document. getElementById ('T '). value) "/> </p>
<Div class = "wrap">
<Div id = "fall"> o </div>
</Div>
</Body>
<Script type = "text/javascript">
Function demo (x, y, a, t ){
Var f = document. getElementById ('fall ');
Var Vx = parseInt (x ),
Vy = parseInt (y ),
G =,
T = parseInt (t ),
H = 0, l = 0, Sx = 0, Sy = 0;
Var I = setInterval (function (){
If (f ){
Sx + = Vx * t;
L = Sx;
Vy + = g * t;
H + = Vy * t;
F. style. left = l + 'px ';
F. style. top = h + 'px ';
If (h> 500 | l> 900) clearInterval (I );
}
}, T );
}
</Script>
</Html>
I hope this article will help you design javascript programs.