20150706 js之定时器
对应智能社：09 定时器的使用
开启定时器：
setInterval(xxx(),1000);//间隔型 第一个参数为函数，第二个为时间，单位为毫秒 setTimeout(xxx(),1000);//延时型
停止定时器：
clearInterval(timer);//参数为setInterval()函数的返回值，返回值实际上是一个number clearTimeout(timer);//参数为setTimeout()函数的返回值，返回值实际上是一个number
setInterval(a,1000);
其中参数一为一个函数名，第二个为一个数值，单位为毫秒。
function a(){
console.log('wyl');
}
setInterval(a,1000)
setInterval 的会一直执行，简直停不下来。
与之对应的是setTimeout则只执行一次。这就是二者的区别。
附上自己写的数码时钟：
<html>
<HEAD>
<meta charset="utf-8">
<title> 数码时钟</title>
<script type="text/javascript">
window.onload = function(){
xx();//一加载就立刻执行
setInterval(xx,1000);
};
function xx(){
var date = new Date();
var hours = to_doub(date.getHours());
var min = to_doub(date.getMinutes());
var sec = to_doub(date.getSeconds());
var str = ''+hours+min+sec;
var img = document.getElementsByTagName('img');
var len = img.length;
for(var i=0;i<len;i++){
img[i].src = "img/"+str[i]+".png";
}
}
// 比如时间为 01 23 43 秒，01时要显示为01而不能显示为1，
function to_doub(n){
if(n<10){
return '0'+n;
}
else{
return ''+n;
}
}
</script>
</HEAD>
<body style="background:grey; ">
<img src="img/0.png">
<img src="img/2.png">
<img src="img/4.png">
<img src="img/5.png">
<img src="img/4.png">
<img src="img/1.png">
</body>
</html>
x效果图如下：
另一个例子：
代码：
<!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 {float:left; margin:20px}
#div1 {width:50px; height:50px; background:red;}
#div2 {width:100px; height:100px; background:#0CF; display:none}
</style>
<script>
window.onload = function(){
var oDiv1 = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
var timer = null;
oDiv1.onmouseover = function(){
oDiv2.style.display = "block";//显示
}
oDiv1.onmouseout = function(){
timer = setTimeout(function(){
oDiv2.style.display = "none";//隐藏
},500);
}
oDiv2.onmouseover = function(){
clearTimeout(timer);
oDiv2.style.display = "block"; //显示
}
oDiv2.onmouseout = function(){
oDiv2.style.display = 'none';
}
}
</script>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
效果图如下：
