首頁 > 開發者 > JavaScript
JS運動相關知識點小結(附彈性運動樣本)，js知識點
本文總結了JS運動相關知識點。分享給大家供大家參考，具體如下：
1.多物體運動架構所有東西都不能共用
2.document.title輸出頻率不能太高
3.在寫JS時盡量避免寫小數，因為電腦內部都是類比的，而不是實際儲存的
如：0.07*100 在JS運算裡不是為7
var a=3;var b=3.00000000000000000001;alert(a=b);
輸出的結果卻是true
4.寫程式思考時先思考一般，再思考特殊，寫程式是，先排除特殊，然後寫一般
if(特殊1){}else if(特殊2){}else{ 一般}
5.數組既可以用for 迴圈也可以用for..in迴圈，因為for迴圈比較可控 ，所以用for迴圈會比較的好
對象（json）的話只能用for..in迴圈
6.在CSS中*{margin:0;padding:0;}這樣寫效能並不怎麼好
7.布局轉換，先給每個元素設定left,top值 ，，全部設定好了以後再 給每個元素position設定absolute 並且margin清零
8.IE7中用UL進行運動時會頓卡，這時候可以用DIV試試看
9.考慮摩擦力因素 iSpeed*0.95(小數的大小取決於摩擦力的大小)
10. 加速度，離目標越遠加速度越大 離目標越近越小（iTarget-obj.offsetLeft）/50
11.加速度和摩擦力比較好的組合是5和0.7 即iSpeed+=(iTarget-obj.offsetLeft)/5 ; iSpeed*=0.7;
12.當程式出問題的時候，思考為什麼會出現這個問題
13.彈性運動在樣式不能過界的時候不能用
14.彈性運動停止條件：距離過近 速度過小
15.分析要圍觀分析，因為樣式會自動的忽略小數，因此，為了不讓丟失的小數積少成多，可以設定一個變數來儲存，然後賦給樣式。 obj.style.left=left+"px";
附：JavaScript彈性運動執行個體
運動原理：加速運動+減速運動+摩擦運動；
代碼如下：
<!doctype html><html><head><meta charset="utf-8"><title>無標題文檔</title><style>#div1{ width:100px; height:100px; background:red; position:absolute; left:0; top:50px;}</style><script>window.onload = function(){ var oBtn = document.getElementById('btn1'); var oDiv = document.getElementById('div1'); oBtn.onclick = function() { startMove(oDiv, 300); };};var iSpeed = 0;var left = 0;function startMove(obj, iTarget){ clearInterval(obj.timer); obj.timer = setInterval(function(){ iSpeed += (iTarget - obj.offsetLeft)/5; iSpeed *= 0.7; left += iSpeed; if(Math.abs(iSpeed)<1 && Math.abs(left-iTarget)<1){ clearInterval(obj.timer); obj.style.left = iTarget + 'px'; }else{ obj.style.left = obj.offsetLeft + iSpeed + 'px'; } }, 30);}</script></head><body><input id="btn1" type="button" value="運動" /><div id="div1"></div><div style="width:1px; height:300px; background:black; position:absolute; top:0; left:300px; "></div></body></html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
