3.定时器的使用（以通俗易懂的语言解释JavaScript）
1.定时器的作用：
开启定时器：setInterval -->间隔型
setTimeout -->延时型
区别：setInterval会一直执行，应用如微博间隔一段时间不断请求后台数据，看是否有新消息，而setTimeout仅执行一次
停止定时器：clearInterval、clearTimerout
例子：定时器的开启和关闭
1 var oBtn1=document.getElementById('btn1'); 2 var oBtn2=document.getElementById('btn2'); 3 var timer=null; //这里需注意 4 5 oBtn1.onclick=function (){ 6 timer=setInterval(function (){ 7 alert('a'); 8 }, 1000); 9 }; 10 11 oBtn2.onclick=function (){ 12 clearInterval(timer); //需指定具体关闭的是哪个定时器 13 };
2.数码时钟：
实现效果：
效果思路：设置图片路径
获取时间：Date对象、getHours、getMinutes、getSeconds
显示时间：字符串连接、空位补零
代码实现：
布局：
1 <body style="background:black; color: white; font-size:50px;"> 2 <img src="img/0.png" /> 3 <img src="img/0.png" /> 4 : 5 <img src="img/0.png" /> 6 <img src="img/0.png" /> 7 : 8 <img src="img/0.png" /> 9 <img src="img/0.png" /> 10 </body>
逻辑：
1 //把一位数补零变成两位 2 function toDou(n){ 3 if(n<10){ 4 return '0'+n; 5 } 6 else{ 7 return ''+n; //加空字符串可以保证返回的一定是字符串 8 } 9 } 10 11 window.onload=function (){ 12 var aImg=document.getElementsByTagName('img'); 13 14 function tick(){ 15 var oDate=new Date(); 16 17 var str=toDou(oDate.getHours())+toDou(oDate.getMinutes())+toDou(oDate.getSeconds()); 18 19 for(var i=0;i<aImg.length;i++){ 20 //不兼容IE7，改用charAt方法，取字符串的某一位，此处为第三个兼容 21 //aImg[i].src='img/'+str[i]+'.png'; 22 aImg[i].src='img/'+str.charAt(i)+'.png'; 23 } 24 } 25 setInterval(tick, 1000); //1秒自动刷新，执行函数，解决时钟不动 26 tick(); //解决刷新时1秒延时问题 27 };
Date对象其他方法：
1 var oDate=new Date(); 2 3 //alert(oDate.getFullYear()); 4 //alert(oDate.getMonth()+1); //月份需+1 5 //alert(oDate.getDate()); 6 alert(oDate.getDay()); //星期0,1,2,3,4,5,6 ->日一二三四五六
3.延时提示框：
实现效果类似鼠标移入QQ头像时，弹出一个信息框，移出信息框时，延时一段时间后消失，并且鼠标在头像和信息框间快速移入移出时无变化。
实现效果：
实现逻辑：
1 var oDiv1=document.getElementById('div1'); 2 var oDiv2=document.getElementById('div2'); 3 var timer=null; 4 //注意定时器的清除，可消除快速移入移出头像和提示框时带来的抖动 5 oDiv1.onmouseover=function (){ 6 clearTimeout(timer); 7 oDiv2.style.display='block'; 8 }; 9 oDiv1.onmouseout=function (){ 10 timer=setTimeout(function (){ 11 oDiv2.style.display='none'; 12 }, 500); 13 }; 14 15 oDiv2.onmouseover=function (){ 16 clearTimeout(timer); 17 }; 18 oDiv2.onmouseout=function (){ 19 timer=setTimeout(function (){ 20 oDiv2.style.display='none'; 21 }, 500); 22 };
整合重复代码：
1 var oDiv1=document.getElementById('div1'); 2 var oDiv2=document.getElementById('div2'); 3 var timer=null; 4 5 oDiv2.onmouseover=oDiv1.onmouseover=function () 6 { 7 clearTimeout(timer); 8 oDiv2.style.display='block'; 9 }; 10 oDiv2.onmouseout=oDiv1.onmouseout=function () 11 { 12 timer=setTimeout(function (){ 13 oDiv2.style.display='none'; 14 }, 500); 15 };
4.无缝滚动--基础：
物体运动基础：
让Div移动起来
offsetLeft的作用-->获取物体的左边距，优点是可以考虑所有影响物体位置的因素（包括left、margin等）之后得出的一个最终值
用定时器让物体连续运动
注意：position需为absolute，然后改变其left和top值
小例子：让一个div从左至右水平滚动，只改变其left值
1 //#div1 {width:200px; height:200px; background:red; position:absolute; left:0; top:50px;} 2 3 setInterval(function (){ 4 var oDiv=document.getElementById('div1'); 5 6 oDiv.style.left=oDiv.offsetLeft+10+'px'; 7 }, 30);
（ps：本内容整理于blue视频教程及个人学习过程中总结，持续更新中）
