JS基础知识记录(四)-定时器的使用以及应用

开启定时器:
setInterval 间隔型
setInterval(函数,时间)
时间单位毫秒，每隔多少时间执行一次函数(执行无限次)
setTimeout (函数,时间)
时间单位毫秒，每隔多少时间执行一次函数(只执行一次)

结束定时器:
clearInterval(关闭的定时器名)
不加定时器名，默认关闭所有定时器
eg :var timer=setInterval(XX,XX);
clearInterval(time);
clearTimeout

应用:网页时钟
* js获取当前时间:*
Date对象
eg:var odate=new Date();
getMinutes/getHours/getSeconds/getFullYear/getMonth(从0开始 0-11月)/getDate(几号)/getDay(星期几 0是星期日)

//获取的时间，如果小于10只会显示一位数，我们要把小于10的数前面增加0
    function toDou(n){
        if(n<10){
            return '0'+n;
        }
        else{
            return ''+n;//这样可以把大于10的数也转化为字符串，方便之后字符串拼接
        }
    }
window.onload=function(){
    var aImg=document.getElementsByTagName(img);
    setInterval(function(){
        var date=new Date();
        var time=date.toDou(getHours())+toDou(date.getMinutes())+toDou(date.getSeconds());
        //拼接位小时分钟秒 如111111（11点11分11秒）

        for(var i=0;i<aImg.length;i++){
            aImg[i].src='img/'+srt[i]+'.png';//计时器数字采用的是img图片，故将网页中的img图片src改变
        }
    },1000)
};

srt[i]细节:低版本浏览器不支持直接取下标，而需要使用charAt();
srt[i] = str.charAt(i)

定时器注意事项:
网页打开后定时器不会立刻执行，但是等待时间间隔之后开始执行

上述代码可以优化为:

window.onload=function(){
    var aImg=document.getElementsByTagName(img);
    function timer(){
        var date=new Date();
        var time=date.toDou(getHours())+toDou(date.getMinutes())+toDou(date.getSeconds());

        for(var i=0;i<aImg.length;i++){
            aImg[i].src='img/'+srt[i]+'.png';
        }
    }
    setInterval(timer,1000);
    timer();//网页执行完毕后就立即设置一次定时器的值，否则会出现网页加载出来过一秒才显示的情况
};

应用:延时提示框:
效果：鼠标放置在头像时候显示资料库，移开头像移入资料库不会立刻消失，继续显示

var time=null;
oDiv1.onmouseover=function(){
    clearTimeout(timer);
    oDiv2.style.display='block';
};
oDiv1.onmouseout=function(){
    timer=setTimeout(function(){
        oDiv2.style.display='none';
    },1000);
};
oDiv2.onmouseover=function(){
    clearTimeout(timer);
};
oDiv2.onmouseout=function(){
    timer=setTimeout(function(){
        oDiv2.style.display='none';
    },1000);
};

JS 允许连等 可以a=b=1 可以把上述代码相同部分合并