有時候我們也想去掉一些加上的定時器，此時可以用clearTimeout(timename) 來關閉倒計時定時器，而用clearInterval(timename)來關閉循環定時器。
1.運動：勻速運動（讓物體動起來）
對定時器的使用
給DIV加絕對定位
offsetLeft
➤問題：到達某個特定位罝停止
解決：做判斷，符合條件時關掉定時器(存定時器timer)
速度變慢(一般不動時間,而是改數字-速度)
用變量存速度
➤問題：取7時，offsetLeft沒有等於300的時候,div停不下來
解決:>=300 //停在301
➤問題：到300後點擊按鈕還繼續走
原因：點擊按鈕,執行函數,開定時器(執行當前函數一至少執行一次)
解決:加else (沒有到達目標之前才執行)
➤問題：連續點擊，速度變快
原因：每點擊一次就開一個定時器，點擊幾次就有幾個定時器同時工作
解決：保證每次只有一個定時器工作,先cearlnterval ()
示例1（分享菜單/鼠標移入劃出，鼠標移出劃入）▼
示例2（淡入淡出效果/鼠標移入淡出，鼠標移出淡入）▼
示例3 勻速運動的停止條件（距離足夠近）示例代碼▼
2、變速運動
逐漸變慢,最後停止
距離越遠速度越大
速度有距離決定
速度=(目標值-當前值)/縮放係數
如果沒有【縮放係數】速度太大,瞬間到達終點.沒有過程
➤問題：並沒有真正到達300
原因：速度只剩0.9 像素是屏幕能夠顯示的最小單位，並不會四捨五入掉
Math.ceil ()向上取整
Math.floor ()向下取整
➤問題：向左走，又差一塊--Math.floor ()
判斷：三目speed=speed>0 ? Math.ceil ( speed ): Math.floor ( speed )
示例代碼▼
3、多物體運動
多個div ,鼠標移入變寬
運動框架傳參obj,知道讓哪個物體動起來
用到緩衝一定要取整
➤問題：div沒運動回去 //清除前一個定時器
原因：只有一個定時器
解決：加物體上的定時器，使每個物體都有一個定時器。定時器作為物體屬性
多個div淡入淡出
首先關閉物體上的定時器
經驗：多物體運動框架所有東西都不能共用
➤問題：不是因為定時器,而是因為alpha
解決：作為屬性附加到物體上/不以變量形式存在
➤問題：offset 的bug 加border變寬
原因：offsetWith並不是真正的width ,它獲取的是盒模型尺寸
解決：躲著寬度扔到行間,parselnt ( oDiv.style.width )
進一步解決：getStyle ( obj, name ) currentStyle , getComputedStyle
加border ,只要offset就有問題 去掉offset
示例：多物體運動框架▼
4.任意值運動
任意值運動的單位分為透明度和px。px單位的任意值▼
5.鏈式運動
多出來的一個參數，只有傳進去的時候才調用
鼠標移入變寬，結束之後彈出abc
先橫向展開.再以向展開
鼠標移出,先變回不透明，變矮，變窄
基於以上的分析與總結，封裝運動框架startMove.js如下：
1，完成如下效果：
▼
2，完成如下效果：
▼
▼
打磚塊效果圖
▼
閱讀更多 千鋒H5 的文章
關鍵字: 打磚塊 購物車 JavaScript
