JavaScript模擬重力狀態(tài)下拋物運(yùn)動(dòng)的方法
更新時(shí)間：2015年03月03日 11:39:41 作者：站長學(xué)院
這篇文章主要介紹了JavaScript模擬重力狀態(tài)下拋物運(yùn)動(dòng)的方法,實(shí)例分析了javascript操作dom元素模擬運(yùn)動(dòng)的方法,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
本文實(shí)例講述了JavaScript模擬重力狀態(tài)下拋物運(yùn)動(dòng)的方法。分享給大家供大家參考。具體分析如下：
這段JavaScript代碼模擬重力狀態(tài)下的拋物運(yùn)動(dòng)，可設(shè)置以下參數(shù)：橫向初速度、縱向初速度、重力加速度（如果這個(gè)加速度是一個(gè)隨時(shí)間變化的值，就能達(dá)到其他非勻加速運(yùn)動(dòng)的效果了）、動(dòng)畫間隔時(shí)間等，相對(duì)專業(yè)
<!doctype html>
<html>
<head>
<title>js拋物運(yùn)動(dòng)</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>模擬重力狀態(tài)下的拋物運(yùn)動(dòng)（假使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>（如果這個(gè)加速度是一個(gè)隨時(shí)間變化的值，就能達(dá)到其他非勻加速運(yùn)動(dòng)的效果了。）</p>
<p>單位時(shí)間：<input id="t" type="text" value="10" />（記錄運(yùn)動(dòng)的時(shí)間間隔）
<p><input type="button" value="演示" 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=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+'px';
f.style.top=h+'px';
if(h>500||l>900)clearInterval(i);
}
},t);
}
</script>
</html>
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
相關(guān)文章
簡化IF-ELSE 高效，但請(qǐng)靈活使用2009-08-08
這篇文章主要介紹了微信小程序收藏功能的實(shí)現(xiàn)代碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-06-06
很多情況下，我們是使用document.all來判斷當(dāng)前瀏覽器是ie還是 Mozilla 。2009-10-10
關(guān)于同時(shí)使用swiper和echarts遇到的問題及解決方法
這篇文章主要介紹了關(guān)于同時(shí)使用swiper和echarts遇到的問題及解決方法,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-04-04 
這篇文章主要為大家詳細(xì)介紹了H5 js點(diǎn)擊按鈕復(fù)制文本到粘貼板，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-11-11 
JavaScript對(duì)表格或元素按文本，數(shù)字或日期排序的方法
這篇文章主要介紹了JavaScript對(duì)表格或元素按文本，數(shù)字或日期排序的方法,涉及javascript頁面元素操作及排序的相關(guān)技巧,需要的朋友可以參考下
2015-05-05 
這篇文章主要介紹了JS常用函數(shù)和常用技巧小結(jié)的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-10-10 
詳解JavaScript中浮點(diǎn)數(shù)的精度計(jì)算
這篇文章主要來和大家介紹一下JavaScript中浮點(diǎn)數(shù)精度計(jì)算的相關(guān)知識(shí)，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起了解一下
2023-06-06 
jquery $(document).ready()和window.onload的區(qū)別淺析
這篇文章主要介紹了jquery $(document).ready()和
window.onload的區(qū)別淺析,本文總結(jié)了執(zhí)行時(shí)間、編寫個(gè)數(shù)不同、簡化寫法等不同的地方,需要的朋友可以參考下
2015-02-02