JavaScript的setInterval()函数写一个来回移动的小球剖析

小球来回移动实现步骤:

小球来回移动1

原理:通过绝对定位,定位小球相对文档的位置,使用left值定位。所以控制小球来回移动,就是(不停的)改变left值的大小。

setInterval()

setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。
setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。

我们假设:小球每秒移动一次,移动到100px然后返回,那么left值的变化过程是(单位是px):

0,10,20,30,40,50,60……100 (每次移动累+10)
然后返回
100……60,50,40,30,20,10,0 (每次移动累-10)

小球来回移动2

Select Code
1
2
3
4
5
6
7
8
9
//每次移动的像素的大小
	step = 10;
	num += step;
	if(num==100 || num==0){
		step = -step;
	}

	//小球的left值
	box.style.left = num + "px";

解释:通过在当num值在最大和最小时,step变为正、负数。而变为累加、累减。

代码:

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div id="box" style="left:0;"></div>

	var box = document.getElementById('box');
	var num=0;
	var step = 10;
	setInterval(function(){
		//在console面板输出num值
		console.log(num);
		box.style.left = num + "px";
		num += step;
		
		//在title输出num值
		document.title = box.style.left;
		
		if(num==100 || num==0){
			step = -step;
		}
	},1000);