js運動框架之一條亂跑的蟲子

轉殖與運動框架的聯合應用

效果：點選元素塊後，元素塊開始隨機的向任何方向移動，並附帶一堆顏色隨機的「尾巴」。每個方向運動3秒後改變方向，同時笑臉變哭臉。

如圖所示：

朝某個方向運動使用的是js運動框架的思想，並通過round()函式呼叫自身實現不停移動的；而「尾巴」的產生則是通過每隔20ms轉殖一次元素塊，並在一秒後刪除完成的。

具體**如下：

1

doctype html
>
2<
html
>
3<
head 
lang
="en"
>
4<
meta 
charset
="utf-8"
>
5<
title
>
title
>
6<
style
>
7#box
13#box div
25style
>
26head
>
27<
body
>
28<
div 
id="box"
>
29<
div>☺
div>
30div
>
31body
>
32html
>
33<
script
>
34//
隨機數35
function
rnd(n, m) 
3839
//獲採樣式
40function
getstyle(obj, attr) 
else46}
4748
//運動框架
49function
move(obj, time, json, fn) ;
51var
start 
={};
52for
(var
name 
injson) 
56var
count 
=math.floor(time /30
);57
varn =0
;58clearinterval(obj.timer);
59obj.timer 
=setinterval(
function
() 
else69}
7071
if(n 
==count) 
75}, 30)
76}7778
window.onload 
=function
() , 
300);88}
89//
運動迴圈執行
90function
round() , 
function
() )97}
98//
元素塊點選之後開始執行
99odiv.onclick 
=function
() , 
1000
);115
}, 20
);116
}117
}118
script
>

js運動框架

第一次寫部落格希望諒解 js的運動框架其實就是對於元素的位置的改變 1 理解style和offsetstyle的區別 2 json和fon in的運用 3 數學知識的理解 4 對定時器的理解和運用 js function getstyle obj,name else 新增乙個函式引數讓能夠實現多個物...

js緩衝運動框架

框架的使用，大大的提高了我們的編碼的效率，下面分享乙個緩衝運動框架。created by wang on 2016 8 3.獲取非行間樣式和行間樣式 function getstyle obj,name else 獲取非行間樣式和行間樣式 緩衝運動框架 var timer null function...

js完美運動框架

建立move.js運動框架function getstyle obj,name else 任意值的運動框架 var timer null function startmove obj,json,fnend else 計算速度 var speed json attr cur 6 speed speed...