Posted in Javascript onOctober 25, 2009
上一版用的是物理思想,这次用的是数学思想,如果您下载过第一版的代码就能明显感到数学的强大!!!!!
这里是弹簧的JS代码:
<script type="text/javascript"> /////////////////this spring begin///////////////////// var X=0.1//X轴增量 var T=0;//X轴初位置 var M=200; //原始振幅倍数 var A=0.7;//振幅倍数衰减数 var D='R';//运动方向 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";//获取弹簧运动速度 T=T+X;//X轴增长 M-=A;//单位时间衰减 if(M<=0)//振幅为零 { S=true; return;//退出 } setTimeout("R()",TI);//回调 } ///////////////////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>
这里是该网页中的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" />原始振幅倍数<br/> <input style="width:50px" type="text" id="A" value="0.7" />振幅倍数衰减数<br/> <input style="width:50px" type="text" id="TI" value="30" />运行时间间隔(毫秒)<br/> <input style="width:80px" type="button" onclick="TS()" value="停止"/>停止后请从新激活<br/><input style="width:80px" type="button" onclick="B()" value="从新激活"/> </div><div style=" position:absolute;"><div id="div" onclick="I()" value="设置完后点我!" style="position:absolute; top:-264px; left:211px; width:50px; height:50px; background-color:#FF0;"></div></div>
这比上次的代码大有长进!100%原创!
转载http://www.cnblogs.com/NONE/
JavaScript弹簧振子超简洁版 完全符合能量守恒,胡克定理
声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@