网站首页 > 技术文章正文

js动态—方块匀速运动（js物体移动）

nanyue 2024-09-21 20:04:07 技术文章 24 ℃

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>方块匀速运动</title>

#box{

width:200px;

height:200px;

background-color :red;

margin-top:50px;

}

</style>

</head>

var leftmargin=0, timer;

function run(){

window.clearInterval(timer); //清除定时器

timer = self.setInterval("move(7,300)",50);//使用定时器,每隔50毫秒调用1次move()方法

}

//moveMargin：向右移动单位值；stopMargin：停止移动的值。

function move(moveMargin,stopMargin){

//当（停止移动的值-已移动的值）的绝对值<向右移动的值时，将停止移动的值赋给目前需移动的值，否则目前已移动的值加上向右移动单位值赋给目前需移动的值

leftmargin = Math.abs(stopMargin-leftmargin<moveMargin) ? stopMargin : leftmargin + moveMargin;

document.getElementById('box').style.marginLeft = leftmargin + "px";

if(leftmargin == stopMargin){

//去掉定时器的方法

window.clearInterval(timer);

leftmargin=0;

}

</script>

<body>

</div>

</body>

</html>