對js動畫和時間控制的使用
// JavaScript Document
//打算移動的元素ID;elementID
//該元素的目的地的"左"位置;final_x;
//該元素的目的地的"上"位置;final_y;
//停頓時間;interval;
function moveMessage(elementID,final_x,final_y,interval){
if(!document.getElementById) return false;
if(!document.getElementById(elementID)) return false;
var elem = document.getElementById(elementID);
if(elem.movement){
clearTimeout(elem.movement)//防止多次執行執行moveMessage,導致程式碼堵塞,這樣可以停止一下未完成的程式碼
}
var xpos = parseInt(elem.style.left);
var ypos = parseInt(elem.style.top);//提取數值
if(xpos == final_x && ypos == final_y){
return true;
}
if(xpos < final_x ){
dist =Math.ceil((final_x-xpos)/10);
xpos=dist+xpos;
}
if(xpos > final_x){
dist =Math.ceil((xpos-final_x)/10);
xpos=xpos-dist;
}
if(ypos < final_y){
dist =Math.ceil((final_y-ypos)/10);
xpos=dist+ypos;
}
if(ypos > final_y){
dist =Math.ceil((ypos-final_y)/10);
xpos=ypos-dist;
}
elem.style.left = xpos +"px";
elem.style.top = ypos +"px";
var repeat = "moveMessage('"+elementID+"',"+final_x+","+final_y+","+interval+")"//'"+elementID+"'這裡的單引號不可以少非數值變數
elem.movement = setTimeout(repeat,interval); //這裡的movement必須是全域性變數因為,剛開始clearTimeout(elem.movement)會找不到報錯
}