首页 > 代码库 > 【JS学习】定时器
【JS学习】定时器
一、定时器的作用
（1）开启定时器
setInterval 间隔型
setTimeout 延时型
两种定时器的区别
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>定时器</title>
<script>
function show()
{
alert(‘a‘);
};
//setInterval(show,1000);//每隔1000毫秒执行一次show函数
setTimeout(show,1000);//延迟1000毫秒之后执行show函数
</script>
</head>
<body>
</body>
</html>
（2）停止定时器
clearInterval
clearTimeout
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>定时器的开启与关闭</title>
<script>
window.onload = function ()
{
var oBtn1=document.getElementById(‘btn1‘);
var oBtn2=document.getElementById(‘btn2‘);
var timer=null;
oBtn1.onclick = function ()
{
timer=setInterval(function()
{
alert(‘a‘);
},1000);
};
oBtn2.onclick = function ()
{
clearInterval(timer);
};
};
</script>
</head>
<body>
<input id="btn1" type="button" value="http://www.mamicode.com/开启" />
<input id="btn2" type="button" value="http://www.mamicode.com/关闭" />
</body>
</html>
二、数码时钟
（1）效果思路
（2）获取系统时间
Data对象
gerHours、GetMinutes、getSeconds
(3)显示系统时间
字符串连接
空位补零
（4）设置图片路径
charAt方法
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>数码时钟（兼容模式）</title>
<script>
//但是不兼容IE7
function toDou(n)
{
if(n<10)
{
return ‘0‘+n;//第一位加上0,保证取出来的时间数字一直是2位数的字符串，比如01
}
else
{
return ‘‘+n;//为什么要加空字符串‘‘,是为了让返回的2位数字也是以字符串的形式返回的
}
};
window.onload = function ()
{
var aImg=document.getElementsByTagName(‘img‘);
//var str=‘013221‘;//这个时间是写死的
//开启定时器，每过一秒钟更新一次图片
function tick()
{
var oDate=new Date();
var str=toDou(oDate.getHours())+toDou(oDate.getMinutes())+toDou(oDate.getSeconds());
for(var i=0;i<aImg.length;i++)
{
aImg[i].src=http://www.mamicode.com/‘img/‘+str.charAt(i)+‘.png‘;//使用charAt(i)使各种浏览器保持兼容！
}
};
setInterval(tick,1000);
tick();//将tick()函数先在onload里面执行一遍，这样刚打开页面时不会有全是0的一瞬间延迟
};
</script>
</head>
<body style="background:black; color:white; font-size:50px;">
<img src="http://www.mamicode.com/img/0.png" />
<img src="http://www.mamicode.com/img/0.png" />
:
<img src="http://www.mamicode.com/img/0.png" />
<img src="http://www.mamicode.com/img/0.png" />
:
<img src="http://www.mamicode.com/img/0.png" />
<img src="http://www.mamicode.com/img/0.png" />
</body>
</html>
三、Date对象的其他方法
年getFullYear
月getMonth()
日getDate()
星期getDay()
四、延时提示框
（1）效果演示
（2）原来的方法
移入显示，移出隐藏
（3）移出延时隐藏
移入下面的Div后，还是隐藏了
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>延时提示框</title>
<style>
div{
margin:10px;
float:left;
}
#div1{
width:50px;
height:50px;
background:red;
}
#div2{
width:250px;
height:180px;
background:#CCC;
display:none;
}
</style>
<script>
window.onload = function ()
{
var oDiv1=document.getElementById(‘div1‘);
var oDiv2=document.getElementById(‘div2‘);
var timer=null;
oDiv1.onmouseover=function()
{
clearTimeout(timer);//如果不事先清除div2的timeout这个定时炸弹，当鼠标从div2移入div1时，div2会消失掉
oDiv2.style.display=‘block‘;
};
oDiv1.onmouseout=function()
{
timer=setTimeout(function()
{
oDiv2.style.display=‘none‘;
},500);
};
//当鼠标移到Div2的时候，先把定时器关闭
oDiv2.onmouseover=function()
{
clearTimeout(timer);
};
oDiv2.onmouseout=function()
{
timer=setTimeout(function()
{
oDiv2.style.display=‘none‘;
},500);
};
};
</script>
</head>
<body>
<div id="div1">
</div>
<div id="div2">
</div>
</body>
</html>
（4）简化代码
合并两个相同的mouseover和mouseout
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>延时提示框合并代码</title>
<style>
div{
margin:10px;
float:left;
}
#div1{
width:50px;
height:50px;
background:red;
}
#div2{
width:250px;
height:180px;
background:#CCC;
display:none;
}
</style>
<script>
window.onload = function ()
{
var oDiv1=document.getElementById(‘div1‘);
var oDiv2=document.getElementById(‘div2‘);
var timer=null;
oDiv2.onmouseover=oDiv1.onmouseover=function()
{
clearTimeout(timer);//如果不事先清除div2的timeout这个定时炸弹，当鼠标从div2移入div1时，div2会消失掉
oDiv2.style.display=‘block‘;
};
oDiv2.onmouseout=oDiv1.onmouseout=function()
{
timer=setTimeout(function()
{
oDiv2.style.display=‘none‘;
},500);
};
};
</script>
</head>
<body>
<div id="div1">
</div>
<div id="div2">
</div>
</body>
</html>
【JS学习】定时器