JavaScript彈簧振子超簡(jiǎn)潔版 完全符合能量守恒,胡克定理
更新時(shí)間:2009年10月25日 10:39:51 作者:
完全符合能量守恒,胡克定理的JavaScript彈簧振子(超簡(jiǎn)潔版,超越第一版!)
上一版用的是物理思想,這次用的是數(shù)學(xué)思想,如果您下載過(guò)第一版的代碼就能明顯感到數(shù)學(xué)的強(qiáng)大!?。。。?
這里是彈簧的JS代碼:
<script type="text/javascript">
/////////////////this spring begin/////////////////////
var X=0.1//X軸增量
var T=0;//X軸初位置
var M=200; //原始振幅倍數(shù)
var A=0.7;//振幅倍數(shù)衰減數(shù)
var D='R';//運(yùn)動(dòng)方向
var O=0;//元素
var L=0;//位置
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";//獲取彈簧運(yùn)動(dòng)速度
T=T+X;//X軸增長(zhǎng)
M-=A;//單位時(shí)間衰減
if(M<=0)//振幅為零
{
S=true;
return;//退出
}
setTimeout("R()",TI);//回調(diào)
}
///////////////////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>
這里是該網(wǎng)頁(yè)中的HTML(沒(méi)啥用,為了演示)
<div id="P" style="width:500px;height:400px;">
<input style="width:50px" type="text" id="X" value="0.1" />X軸增量<br/><input style="width:50px" type="text" id="M" value="200" />原始振幅倍數(shù)<br/>
<input style="width:50px" type="text" id="A" value="0.7" />振幅倍數(shù)衰減數(shù)<br/>
<input style="width:50px" type="text" id="TI" value="30" />運(yùn)行時(shí)間間隔(毫秒)<br/>
<input style="width:80px" type="button" onclick="TS()" value="停止"/>停止后請(qǐng)從新激活<br/><input style="width:80px" type="button" onclick="B()" value="從新激活"/>
</div><div style=" position:absolute;"><div id="div" onclick="I()" value="設(shè)置完后點(diǎn)我!" style="position:absolute; top:-264px; left:211px; width:50px; height:50px; background-color:#FF0;"></div></div>
這比上次的代碼大有長(zhǎng)進(jìn)!100%原創(chuàng)!
轉(zhuǎn)載http://www.cnblogs.com/NONE/
這里是彈簧的JS代碼:
復(fù)制代碼 代碼如下:
<script type="text/javascript">
/////////////////this spring begin/////////////////////
var X=0.1//X軸增量
var T=0;//X軸初位置
var M=200; //原始振幅倍數(shù)
var A=0.7;//振幅倍數(shù)衰減數(shù)
var D='R';//運(yùn)動(dòng)方向
var O=0;//元素
var L=0;//位置
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";//獲取彈簧運(yùn)動(dòng)速度
T=T+X;//X軸增長(zhǎng)
M-=A;//單位時(shí)間衰減
if(M<=0)//振幅為零
{
S=true;
return;//退出
}
setTimeout("R()",TI);//回調(diào)
}
///////////////////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>
這里是該網(wǎng)頁(yè)中的HTML(沒(méi)啥用,為了演示)
復(fù)制代碼 代碼如下:
<div id="P" style="width:500px;height:400px;">
<input style="width:50px" type="text" id="X" value="0.1" />X軸增量<br/><input style="width:50px" type="text" id="M" value="200" />原始振幅倍數(shù)<br/>
<input style="width:50px" type="text" id="A" value="0.7" />振幅倍數(shù)衰減數(shù)<br/>
<input style="width:50px" type="text" id="TI" value="30" />運(yùn)行時(shí)間間隔(毫秒)<br/>
<input style="width:80px" type="button" onclick="TS()" value="停止"/>停止后請(qǐng)從新激活<br/><input style="width:80px" type="button" onclick="B()" value="從新激活"/>
</div><div style=" position:absolute;"><div id="div" onclick="I()" value="設(shè)置完后點(diǎn)我!" style="position:absolute; top:-264px; left:211px; width:50px; height:50px; background-color:#FF0;"></div></div>
這比上次的代碼大有長(zhǎng)進(jìn)!100%原創(chuàng)!
轉(zhuǎn)載http://www.cnblogs.com/NONE/
相關(guān)文章
IE瀏覽器打印的頁(yè)眉頁(yè)腳設(shè)置解決方法
IE瀏覽器打印的頁(yè)眉頁(yè)腳設(shè)置解決方法2009-12-12
JS中script標(biāo)簽defer和async屬性的區(qū)別詳解
這篇文章主要介紹了JS中script標(biāo)簽defer和async屬性的區(qū)別詳解的相關(guān)資料,需要的朋友可以參考下2016-08-08
js判斷傳入時(shí)間和當(dāng)前時(shí)間大小實(shí)例(超簡(jiǎn)單)
下面小編就為大家分享一篇js判斷傳入時(shí)間和當(dāng)前時(shí)間大小實(shí)例(超簡(jiǎn)單),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
微信開(kāi)發(fā)之微信jssdk錄音功能開(kāi)發(fā)示例
這篇文章主要介紹了微信開(kāi)發(fā)之微信jssdk錄音功能開(kāi)發(fā)示例,在微信瀏覽器內(nèi)打開(kāi)的頁(yè)面,制作一個(gè)按鈕,用戶(hù)按住按鈕后開(kāi)始錄音,松手后停止錄音,感興趣的小伙伴們可以參考一下2018-10-10
JS獲取URL中參數(shù)值(QueryString)的4種方法分享
今天碰到要在一個(gè)頁(yè)面獲取另外一個(gè)頁(yè)面url傳過(guò)來(lái)的參數(shù),一開(kāi)始很本能的想到了用 split("?")這樣一步步的分解出需要的參數(shù)。后來(lái)想了一下,肯定會(huì)有更加簡(jiǎn)單的方法的!所以在網(wǎng)上找到了幾個(gè)很又簡(jiǎn)單實(shí)用的方法,mark下。2014-04-04
TS?中?never,void,unknown類(lèi)型詳解
這篇文章主要介紹了TS?中?never,void,unknown類(lèi)型詳解,never?類(lèi)型是 TypeScript 中的底層類(lèi)型,unknown是TypeScript中比較特殊的一種類(lèi)型,它用于描述類(lèi)型不確定的變量,本文給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05
一個(gè)不錯(cuò)的可以檢測(cè)多中瀏覽器的函數(shù)和其它功能
一個(gè)不錯(cuò)的可以檢測(cè)多中瀏覽器的函數(shù)和其它功能...2007-04-04
javascript在事件監(jiān)聽(tīng)方面的兼容性小結(jié)
javascript 在事件監(jiān)聽(tīng)方面的兼容性總結(jié),注意是由于多個(gè)瀏覽器的不一致,導(dǎo)致大家在js書(shū)寫(xiě)時(shí)需要考慮多個(gè)瀏覽器的兼容性。2010-04-04

