04定时器的使用

开启定时器
setInterval 间隔型无线循环执行下去
setTimeout 延时型只执行一次

<script>
function show()
{
    alert('a');
}
setInterval(show, 1000);//无线循环执行下去
</script>

<script>
function show()
{
    alert('a');
}
setTimeout(show, 1000);//只执行一次
</script>

停止定时器
clearInterval 清除setInterval开启的定时器
clearTimeout 清除setTimeout开的的定时器
开启清除定时器小例子

<!DOCTYPE HTML>
<html>
<head>
<meta 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="开启" />
<input id="btn2" type="button" value="关闭" />
</body>
</html>

View Code

获取系统时间

Date对象

getHours 时
getMinutes 分
getSeconds 秒
getFullYear() 年
getMonth() 月
getDate() 日
getDay() 星期

效果思路
获取系统时间 Date对象
getHours、getMinutes、getSeconds 显示系统时间
字符串连接
空位补零
设置图片路径 charAt方法

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
function toDou(n)
{
    if(n<10)
    {
        return '0'+n;//判断是否小于10 如果小于在前面加0，把一个数字给他补0变成两位数例如05 
    }
    else
    {
        return ''+n;//前面加空格让其返回字符串
    }
}

window.onload=function ()
{
    var aImg=document.getElementsByTagName('img');
    
    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='img/'+str.charAt(i)+'.png';//设置图片路径 charAt方法 获取字符串上的某一位东西 让其兼容ie
        }
    }
    setInterval(tick, 1000);
    tick();
};
</script>
</head>
<body style="background:black; color: white; font-size:50px;">
<img src="img/0.png" />
<img src="img/0.png" />
:
<img src="img/0.png" />
<img src="img/0.png" />
:
<img src="img/0.png" />
<img src="img/0.png" />
</body>
</html>

View Code