今天我们来说说定时器，其实定时器在很多程序中是很常用的，比如我们看到的一些网站上的滚动图片，鼠标移动到QQ头像上的效果，还有网站上时间表等等。接下来我们就围绕这三个定时器的经典应用来了解定时器。
首先，我们讲到的是如果开启定时器
setInterval 间隔型，应用：无缝滚动、网站时钟
setTimeout 延时型，应用：QQ头像应用
停止定时器
clearInterval
clearTimeout
两种定时器的区别：
简单的说，setInterval会在设定的时间自动重复，setTimeout不会重复而具有延时性
接下来，就是我们的应用：
1、数码时钟
效果思路
获取系统时间
Date对象
getHours、getMinutes、getSeconds
显示系统时间
字符串连接
空位补零
设置图片
charAt方法 // 能解决兼容性问题
html
<img scr = "img/1.png"/><img src = "img/2.png"/>:<img src = "img/3.png"/><img src = "img/4.png"/>:<img src = "img/5.png"/><img src = "img/6.png"/>
js
function toDou(num){ // 空位补零函数
if(num<10){
return "0" + num;
}
else{
return "" + num;
}
}
window.onload = function(){
var aImg = document.getElementsByTagName(‘img‘);
function tick = function(){
// 获取系统时间
var oDate = new Date();
// 字符串连接
var oTime = toDou(oDate.getHours())+toDou(oDate.getMinutes())+toDou(oDate.getSeconds())
for(var i = 0; i < aImg.length; i++){
// 设置图片
aImg[i] .src = "img/"+oTime[i]+"png";
}
}
setInterval(tick,1000); // 1000ms = 1s
tick(); // 防止页面刷新时，显示 00:00:00
}
2、延时提示框
效果思路
原来方法
移入显示，移除隐藏
移出延时隐藏
移入下面的Div后，还是隐藏了
简化代码
合并两个相同的onmouseover和onmouseout
html
<div id = "Icon" style = "width:50px; height:50px; background:green; float:left; margin-right:20px;"></div>
<div id="Icondetail" style = "width:200px; height:150px; background:#ccc; float:left; display:none" ></div>
js
var oDiv1 = document.getElementById("Icon");
var oDiv2 = document.getElementById("Icondetails");
var timer = null;
oDiv2.onmouseover = oDiv1.onmouseover = functiton(){
clearTimerout(timer);
oDiv2.style.display = ‘block‘;
}
oDiv2.onmouseout =oDiv1.onmouseout = function(){
timer = setTimeout(function(){
oDiv2.style.display = ‘none‘;
},500);
}
3、无缝滚动——基础
效果思路
物体运动基础
让Div移动起来
offsetLeft的作用
用定时器让物体连续移动
<div id= "div1" style = "width:200px; height:200px; background:red"></div>
js
var oDiv = document.geElementById("div1");
setInterval(function(){
oDiv.style.left = oDiv.offsetLeft + 2 + "px";
},30);
效果原理
让ul一直向左移动
复制li
innerHTML 和 +=
修改ul的width
滚动过界后，重设位置（判断过界）
扩展
改变滚动方向
修改speed
修改判断条件
鼠标移入暂停
移入关闭定时器
移除重新设置定时器
<div id = "div1" >
<ul>
<li><img src = "img/1.jpg"/></li>
<li><img src = "img/2.jpg"/></li>
<li><img src = "img/3.jpg"/></li>
<li><img src = "img/4.jpg"/></li>
</ul>
</div>
<a href = "javascript:;">向左走</a>
<a href = "javascript:;">向右走</a>
*{margin:0; padding:0;}
#div1 {width:718px; height:108px; border:1px solid #000; position:relative; overfloat:hidden;}
#div1 ul { position:absolute; top:0; left:0}
#div1 ul li{width:178px; height:108px; list-style:none;}
var oDiv = document.getElementById("div1");
var oUl = oDiv.getElementsByTagName("ul");
var aLi = oUl.getElementsByTagName("li");
var speed= null;
//复制li
oUl.innerHTML += oUl.innerHTML;
//修改ul的width
oUl.style.width = aLi[0].width * aLi.length + "px";
function move(){
if(oUl.offsetLeft<- oUl.offsetWidth/2){
oUl.style.left = "0";
}
if(oUl.offsetLeft>0){
oUl.style.left = - oUl.offsetWidth/2 + "px";
}
oUl.style.left = oUl.offsetLeft - speed + "px";
}
var timer = setInterval(move,30);
扩展：
//鼠标移入暂停，移出移动
oDiv.onmouseover = function(){
clearInterval(timer);
}
oDiv.onmouseout = function(){
setInterval(move,30);
}
//改变滚动方向
document.getElementsByTagName("a")[0].onclick = function(){
speed = -2; // 向左移动
}
document.getElementsByTagName("a")[1].onclick = function(){
speed = 2; // 向右移动
}
总结：主要是两个定时器的开启和关闭的应用。同时，还讲到的offsetLeft获取对象的左边距（包含margin-left）；还有在写程序中主要变量的使用，运用变量来处理一些需要变的东西，比如这里应用到的speed来控制的方向；兼容性问题：charAt()方法：返回指定位置的字符。