JavaScript彈簧振子超簡(jiǎn)潔版 完全符合能量守恒,胡克定理
更新時(shí)間：2009年10月25日 10:39:51 作者：
完全符合能量守恒,胡克定理的JavaScript彈簧振子(超簡(jiǎn)潔版,超越第一版!)
上一版用的是物理思想，這次用的是數(shù)學(xué)思想，如果您下載過第一版的代碼就能明顯感到數(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(沒啥用,為了演示)
<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(沒啥用,為了演示)
復(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)文章
JavaScript中的for循環(huán)與雙重for循環(huán)詳解
這篇文章主要給大家介紹了關(guān)于JavaScript中for循環(huán)與雙重for循環(huán)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
這篇文章主要介紹了JavaScript中return的用法,包括return定義，寫法等方面的知識(shí)，需要的朋友可以參考下2017-05-05
這篇文章主要介紹了JavaScript組件開發(fā)的方法,結(jié)合完整實(shí)例形式分析了組件的原理與實(shí)現(xiàn)技巧,代碼包含的詳盡的注釋,便于理解,需要的朋友可以參考下2015-12-12
JavaScript檢測(cè)彈出窗口是否已經(jīng)關(guān)閉的方法
這篇文章主要介紹了JavaScript檢測(cè)彈出窗口是否已經(jīng)關(guān)閉的方法,涉及javascript中window屬性的closed屬性的使用技巧,需要的朋友可以參考下2015-03-03
document.getElementByName方法沒有document.getElementsByName得到的是標(biāo)簽的數(shù)組，下面為大家詳細(xì)介紹下具體的使用，感興趣的朋友可以參考下，希望對(duì)大家有所幫助2013-08-08
JavaScript實(shí)現(xiàn)Tab標(biāo)簽頁(yè)切換的最簡(jiǎn)便方式(4種)
這篇文章主要介紹了JavaScript實(shí)現(xiàn)Tab標(biāo)簽頁(yè)切換的最簡(jiǎn)便方式(4種)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
這篇文章主要為大家詳細(xì)介紹了javascript創(chuàng)建對(duì)象的幾種不同方法2016-03-03
Ubuntu 11.10 安裝Node.js的方法，需要的朋友可以參考下。2011-11-11
Bootstrap輪播加上css3動(dòng)畫，炫酷到底！
這篇文章將展示如何在 Bootstrap輪播上添加有趣的動(dòng)畫效果，同時(shí)確保這個(gè)js組件自由擴(kuò)展和快速上手，感興趣的小伙伴們可以參考一下2015-12-12
js實(shí)現(xiàn)的四級(jí)左側(cè)網(wǎng)站分類菜單實(shí)例
這篇文章主要介紹了js實(shí)現(xiàn)的四級(jí)左側(cè)網(wǎng)站分類菜單,實(shí)例分析了javascript操作頁(yè)面元素實(shí)現(xiàn)tab切換的相關(guān)技巧,需要的朋友可以參考下2015-05-05