JavaScript模擬重力狀態(tài)下拋物運(yùn)動(dòng)的方法
更新時(shí)間：2015年03月03日 11:39:41 作者：站長(zhǎng)學(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)文章
在處理財(cái)務(wù)賬款類需求時(shí)需要將轉(zhuǎn)賬金額寫成大寫的,下面這篇文章主要給大家介紹了關(guān)于JS轉(zhuǎn)換金額大寫方法的相關(guān)資料,文中給出了詳細(xì)的代碼示例,需要的朋友可以參考下2023-10-10
JavaScript 選中文字并響應(yīng)獲取的實(shí)現(xiàn)代碼
當(dāng)鼠標(biāo)選擇一段文字時(shí)，對(duì)這個(gè)事件產(chǎn)生響應(yīng)，并且將選中的文字傳遞出去。2011-08-08
html5+javascript制作簡(jiǎn)易畫板附圖
這篇文章主要介紹了使用html5+javascript制作的簡(jiǎn)易畫板,需要的朋友可以參考下2014-04-04
js動(dòng)態(tài)設(shè)置關(guān)鍵偵@keyframes的方法技巧
這篇文章主要給大家介紹了關(guān)于js動(dòng)態(tài)設(shè)置關(guān)鍵偵@keyframes的方法技巧,@keyframes規(guī)則通過(guò)在動(dòng)畫序列中定義關(guān)鍵幀(或waypoints)的樣式來(lái)控制CSS動(dòng)畫序列中的中間步驟,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-04-04
JavaScript實(shí)現(xiàn)復(fù)制粘貼剪切功能三種方法
這篇文章主要給大家介紹了關(guān)于JavaScript實(shí)現(xiàn)復(fù)制粘貼剪切功能的相關(guān)資料,在實(shí)際案例的操作過(guò)程中,不少人都會(huì)遇到這樣的開(kāi)發(fā)需求,文中通過(guò)代碼將三種方法介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01
隨著Web技術(shù)的發(fā)展,網(wǎng)頁(yè)上的交互性變得越來(lái)越重要,一個(gè)在線畫板是一個(gè)很好的例子,本文將使用HTML5的Canvas元素和JavaScript來(lái)實(shí)現(xiàn)一個(gè)簡(jiǎn)單的在線畫板,需要的可以了解下2024-01-01
這篇文章主要介紹了上傳圖片js判斷圖片尺寸和格式并兼容IE,需要的朋友可以參考下2014-09-09
淺談函數(shù)調(diào)用的不同方式,以及this的指向
下面小編就為大家?guī)?lái)一篇淺談函數(shù)調(diào)用的不同方式,以及this的指向。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
IE6瀏覽器中window.location.href無(wú)效的解決方法
這篇文章主要介紹了IE6瀏覽器中window.location.href無(wú)效的解決方法,給出了正確與錯(cuò)誤的實(shí)例對(duì)比,分析跳轉(zhuǎn)無(wú)效的原因與解決方法,是非常實(shí)用的技巧,需要的朋友可以參考下2014-11-11
在本篇文章里小編給大家分享了關(guān)于js取小數(shù)點(diǎn)后兩位四種方法和實(shí)例代碼，需要的朋友們學(xué)習(xí)下。2019-01-01