recherche

Maison >interface Web >js tutoriel >Explication détaillée des exemples de code pour simuler le mouvement parabolique en JavaScript

Explication détaillée des exemples de code pour simuler le mouvement parabolique en JavaScript

黄舟
黄舟original
2017-03-15 14:35:231827parcourir

Le mouvement parabolique est une sorte de mouvement provoqué par l'induction de la gravité. Cet article utilisera un simple code JavaScript pour simuler l'implémentation du mouvement parabolique. Le code suivant nous est très utile pour apprendre JavaScript.

Ce code JavaScript simule le mouvement parabolique sous l'état de gravité Vous pouvez définir les paramètres suivants : vitesse initiale transversale, vitesse initiale longitudinale, accélération de la gravité (si cette accélération est une valeur qui change avec. temps, vous pouvez obtenir l'effet d'un autre mouvement d'accélération non uniforme), animation temps d'intervalle, etc., relativement professionnel, voici le code suivant : 

<!doctype html>
<html>
<head>
<title>js抛物运动</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>模拟重力状态下的抛物运动（假使1px==1mm）</h3>
<p>横向初速度：<input id="Vx" type="text" value="2" />px/ms</p>
<p>纵向初速度：<input id="Vy" type="text" value="-2" />px/ms</p>
<p>重力加速度：<input id="a" type="text" value="0.0098" />px/平方ms</p>
<p>（如果这个加速度是一个随时间变化的值，就能达到其他非匀加速运动的效果了。）</p>
<p>单位时间：<input id="t" type="text" value="10" />（记录运动的时间间隔）
<p><input type="button" value="演示" onclick="demo(document.getElementById(&#39;Vx&#39;).value, document.getElementById(&#39;Vy&#39;).value, 
document.getElementById(&#39;a&#39;).value, document.getElementById(&#39;t&#39;).value)"/></p>
<p class="wrap">
<p id="fall">o</p>
</p>
</body>
<script type="text/javascript">
function demo(x,y,a,t) {
var f=document.getElementById(&#39;fall&#39;);
var Vx=parseInt(x),
Vy=parseInt(y),
g=a,
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+&#39;px&#39;;
f.style.top=h+&#39;px&#39;;
if(h>500||l>900)clearInterval(i);
}
},t);
}
</script>
</html>

Vous pouvez cliquer ici pour voir l'effet de démonstration du mouvement parabolique simulé par JavaScript.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Explication détaillée d'exemples de JavaScript appelant ActiveX pour faire fonctionner la base de données OracleArticle suivant：Explication détaillée d'exemples de JavaScript appelant ActiveX pour faire fonctionner la base de données Oracle

Articles Liés

Voir plus