JS運動相關知識點小結(附彈性運動範例)_javascript技巧-js教程-PHP中文網

首頁

web前端

js教程

JS運動相關知識點小結(附彈性運動範例)_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:21 PM

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>

更多關於JavaScript運動效果相關內容可查看本站專題：《JavaScript運動效果與技巧匯總》

希望本文所述對大家JavaScript程式設計有所幫助。

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

C和JavaScript：連接解釋Apr 23, 2025 am 12:07 AM

C 和JavaScript通過WebAssembly實現互操作性。 1）C 代碼編譯成WebAssembly模塊，引入到JavaScript環境中，增強計算能力。 2）在遊戲開發中，C 處理物理引擎和圖形渲染，JavaScript負責遊戲邏輯和用戶界面。

從網站到應用程序：JavaScript的不同應用Apr 22, 2025 am 12:02 AM

JavaScript在網站、移動應用、桌面應用和服務器端編程中均有廣泛應用。 1)在網站開發中，JavaScript與HTML、CSS一起操作DOM，實現動態效果，並支持如jQuery、React等框架。 2)通過ReactNative和Ionic，JavaScript用於開發跨平台移動應用。 3)Electron框架使JavaScript能構建桌面應用。 4)Node.js讓JavaScript在服務器端運行，支持高並發請求。

Python vs. JavaScript：比較用例和應用程序Apr 21, 2025 am 12:01 AM

Python更適合數據科學和自動化，JavaScript更適合前端和全棧開發。 1.Python在數據科學和機器學習中表現出色，使用NumPy、Pandas等庫進行數據處理和建模。 2.Python在自動化和腳本編寫方面簡潔高效。 3.JavaScript在前端開發中不可或缺，用於構建動態網頁和單頁面應用。 4.JavaScript通過Node.js在後端開發中發揮作用，支持全棧開發。

C/C在JavaScript口譯員和編譯器中的作用Apr 20, 2025 am 12:01 AM

C和C 在JavaScript引擎中扮演了至关重要的角色，主要用于实现解释器和JIT编译器。1）C 用于解析JavaScript源码并生成抽象语法树。2）C 负责生成和执行字节码。3）C 实现JIT编译器，在运行时优化和编译热点代码，显著提高JavaScript的执行效率。

JavaScript在行動中：現實世界中的示例和項目Apr 19, 2025 am 12:13 AM

JavaScript在現實世界中的應用包括前端和後端開發。 1)通過構建TODO列表應用展示前端應用，涉及DOM操作和事件處理。 2)通過Node.js和Express構建RESTfulAPI展示後端應用。

JavaScript和Web：核心功能和用例Apr 18, 2025 am 12:19 AM

JavaScript在Web開發中的主要用途包括客戶端交互、表單驗證和異步通信。 1)通過DOM操作實現動態內容更新和用戶交互；2)在用戶提交數據前進行客戶端驗證，提高用戶體驗；3)通過AJAX技術實現與服務器的無刷新通信。

了解JavaScript引擎：實施詳細信息Apr 17, 2025 am 12:05 AM

理解JavaScript引擎內部工作原理對開發者重要，因為它能幫助編寫更高效的代碼並理解性能瓶頸和優化策略。 1)引擎的工作流程包括解析、編譯和執行三個階段；2)執行過程中，引擎會進行動態優化，如內聯緩存和隱藏類；3)最佳實踐包括避免全局變量、優化循環、使用const和let，以及避免過度使用閉包。