1、定时器——setInterval("执行函数名",间隔时间);
setInterval(fun,1000);每隔1秒钟执行一次fun函数
setInterval("fun()",1000);每隔1秒钟执行一次fun函数
排队执行——间隔时间t1和程序执行时间t2，如果t1<t2（程序执行时间比间隔时间还长），这样是不合理的。必须是t2<=t1。
timer=setInterval(fun,1000); clearInterval(timer); 关闭定时器
2、倒计时
原理：最终时间-现在时间=倒计时
问题1：如果直接用年份和月份来减，会存在年份不一样，月份不一样导致天数不一样的尴尬局面，所以就借助于一个基准时间，就是1970年1月1日午夜。
解决办法：用最终时间的距离1970 的毫秒数-现在距1970的毫秒数=将得到的结果不断转化就可以了
问题2：现在距离1970的毫秒数容易获取，但是最终时间的毫秒数如何获取呢？
解决办法：var nowTime=new Date();//不写参数，得到的是当前时间
var endTime=new Date("2016/11/11"); //写了参数，就可以设置一个未来的时间
var endTime=new Date("2016/11/11 12:00:00");//这个是写了一个更具体的参数，带时钟的未来时间
3、定时器——setTimeout("fun()",1000);
延迟1秒钟执行函数，只执行一次。
4、setTimeout应用实例
功能：页面倒计时跳转
代码：这个比setinterval要更友好，更常用。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <div id="box"></div> </body> </html> <script type="text/javascript"> var box=document.getElementById("box"); setTimeout(goIndex,1000); var time=5; function goIndex(){ time--; if(time<0){ window.location.href="http://www.baidu.com"; }else{ box.innerHTML="<a href='http://www.baidu.com'>还有"+time+"秒跳转到百度首页...</a>"; setTimeout(goIndex,1000); } } </script>
5、setTimeout应用实例
描述：图片上下滚动播放
原理：让图片绝对定位，改变图片的top值，让其上下移动。
代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{margin:0;padding: 0;} #box{ width: 512px; height: 400px; margin:20px auto; overflow: hidden; position: relative; } #box img{ position: absolute; top: 0; left: 0; } #box span{ position: absolute; left:0; width:512px; height:200px; cursor: pointer; } #box #top{ top:0; } #box #bottom{ bottom:0; } </style> <script type="text/javascript"> window.onload=function(){ var top=document.getElementById("top"); var bottom=document.getElementById("bottom"); var pic=document.getElementsByTagName("img")[0]; var topposition=0; var height=1470; var timer=null; top.onmouseover=function(){ timer=setTimeout(goDown,10); function goDown(){ topposition--; if(topposition>(-1*1070)){ pic.style.top=topposition+"px"; timer=setTimeout(goDown,10); }else { topposition=-1070; pic.style.top=topposition+"px"; clearTimeout(timer);//跳出递归 } } } top.onmouseout=function(){ clearTimeout(timer); pic.style.top=topposition+"px"; } bottom.onmouseover=function(){ timer=setTimeout(goUp,10); function goUp(){ topposition++; if(topposition<0){ pic.style.top=topposition+"px"; timer=setTimeout(goUp,10); }else{ topposition=0; pic.style.top=topposition+"px"; clearTimeout(timer);//跳出递归 } } } bottom.onmouseout=function(){ clearTimeout(timer); pic.style.top=topposition+"px"; } } </script> </head> <body> <div id="box"> <img src="img/mi.png" alt="" /> <span id="top"></span> <span id="bottom"></span> </div> </body> </html>