一、setInterval 和setTimeout
window.setInterval(匿名函数,间隔时间); //间隔定时器（循环定时器） window.setTimeout(匿名函数,间隔时间); //单次定时器（只执行一次）
第一参数：函数，既可以是一个函数的函数名引用，也可以是一个匿名函数。不能加()
第二参数，时间间隔，单位是毫秒，1秒钟等于1000毫秒
能使用间隔时间，调用一次函数，习惯叫做定时器，按理说叫“间隔器”。
function fun(){
alert(1) //每间隔2秒执行当前这个函数
}
setInterval(fun,2000);
函数执行的方法：
1、函数名或变量名加()执行
2、将一个函数绑定给事件，事件被触发，自动执行函数
3、将函数传给定时器的第一个参数，每间隔时间，自动执行函数
注意：定时器的开启不需要任何条件，只要程序能够执行到定时器，就会立即被开启，到第一个时间间隔后执行函数。
简单动模型
视觉暂留：是一个视觉欺诈效果，人眼有视觉残留，每移动一步足够短，连续看起来就像在运动，残留时间是0.1到0.4秒。把连续相关的画面，连续播放，就是运动。
信号量编程：定义一个全局信号量，定义一个定时器，函数内部每执行一次，信号量自加，给CSS属性赋值。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>Document</title> <style type="text/css"> *{ margin:0; padding:0; } div{ width:100px; height:100px; background:greenyellow; position:absolute; left:0; top:0; } </style> </head> <body> <div></div> </body> </html> <script type="text/javascript"> var div=document.getElementsByTagName('div')[0]; var nowleft=100; setInterval(function(){ nowleft += 10; div.style.left=nowleft+'px'; },20) </script>
控制简单运动的速度方法：
①增加每一步移动的步长可以加快运动速度（更改信号量自加的值）。
②缩短间隔时间，相当于每一秒走的次数增加，1秒钟走的距离就越远。
二、清除定时器
clearInterval(timer) 清除间隔定时器
clearTimeout(timer) 清除单次定时器
清除定时器的时候，要将定时器赋值给某个变量，停止的时候只需要clearInterval(变量名)。
三、运动注意事项
问题一：如果将开启的定时器的程序放在一个点击事件中，点击事件被多次触发，相当于开启了多个定时器，在同一个时间点上有多个函数同时执行。（解决方法：设表先关）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>Document</title> <style type="text/css"> *{ margin:0; padding:0; } div{ width:100px; height:100px; background:greenyellow; position:absolute; left:0; top:0; margin-top:100px; } </style> </head> <body> <input type="button" value="开始运动" /> <input type="button" value="停止运动" /><br/> <div></div> </body> </html> <script type="text/javascript"> var start=document.getElementsByTagName('input')[0]; var stop=document.getElementsByTagName('input')[1]; var div=document.getElementsByTagName('div')[0]; var nowleft=0; var timer; //存贮定时器 start.onclick=function(){ // 设表先关，避免多次点击按钮累加定时器，点击按钮先关掉之前开启的定时器 clearInterval(timer); timer=setInterval(move,50) } stop.onclick=function(){ clearInterval(timer); } function move(){ nowleft+=10; div.style.left=nowleft+'px'; } </script>
问题二：当盒子到终点，自己停止，但是有时候步长设置的不合理，不能正好停在固定值位置
比如起点100，终点我们想要600自动停止：
解决方法：拉终停表，定时器函数每次执行都判断是否走到终点，如果走到终点，先将变量值直接赋值一个终点值，然后停止定时器，拉到终点，停止定时器。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>Document</title> <style type="text/css"> *{ margin:0; padding:0; } div{ width:100px; height:100px; background:greenyellow; position:absolute; left:0; top:0; margin-top:100px; } </style> </head> <body> <input type="button" value="开始运动" /> <input type="button" value="停止运动" /><br/> <div></div> </body> </html> <script type="text/javascript"> var start=document.getElementsByTagName('input')[0]; var stop=document.getElementsByTagName('input')[1]; var div=document.getElementsByTagName('div')[0]; var nowleft=0; var timer; //存贮定时器 start.onclick=function(){ // 设表先关，避免多次点击按钮累加定时器，点击按钮先关掉之前开启的定时器 clearInterval(timer); timer=setInterval(move,50) } stop.onclick=function(){ clearInterval(timer); } function move(){ nowleft+=10; if(nowleft>600){ //拉终点停定时器 nowleft=600; clearInterval(timer); } div.style.left=nowleft+'px'; } </script>