html让方块往下移动,JS控制方块自动移动

通过JS的setTimeout事件来控制一个小方块绕屏幕移动：

function autoMoveBox()

{

//debugger;

var windowHeight = window.innerHeight;

var windowWidth = window.innerWidth;

var box = document.getElementById("square");

var boxWidth = parseInt(box.style.width);

var boxHeight = parseInt(box.style.height);

var boxTop = parseInt(box.style.top);

var boxLeft = parseInt(box.style.left);

var size = 10;

//左上角，开始右移

if( (boxTop-boxHeight<=0) && (boxLeft+boxWidth)

{

box.style.left = boxLeft + size + "px";

}

else if((boxTop+boxHeight=windowWidth)

{

//右上角，开始下移

box.style.top = boxTop + size + "px";

}

else if((boxTop+boxHeight)>=windowHeight && (boxLeft- boxWidth)>0)

{

//右下角，开始左移

box.style.left = boxLeft - size + "px";

}

else if((boxTop-boxHeight)>=0 && (boxLeft-boxWidth)<=0)

{

//左下角，开始上移

box.style.top = boxTop - size + "px";

}

setTimeout('autoMoveBox()',50);

}