js学习之定时器的使用

    js实现数码钟表

       基于js定时器的基础知识实现的一个简单的数码钟表。

            前端页面代码：

                  

 //引入的图片是一些数字图片，小伙伴们可以自己找

<h2>数码钟表</h2>
    <div class="year">
        <img class="num" src="images/0.png" alt="0" />
        <img class="num" src="images/0.png" alt="0" />
        <img class="num" src="images/0.png" alt="0" />
    </div>
    <div class="time">
        <img class="num" src="images/0.png" alt="0" />
        <img class="num" src="images/0.png" alt="0" />
        <img src="images/sign.png" alt="sign" />
    </div>

         实现的js代码：

<script>
function toDou(n)
{
	if(n<10)
	{
		return '0'+n;
	}
	else
	{
		return ''+n;
	}
}

window.οnlοad=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++)
		{
        //charAt() 方法可返回指定位置的字符。
			aImg[i].src='img/'+str.charAt(i)+'.png';
		}
	}
	// setInterval(函数，时间(毫秒)),间隔形定时任务
	setInterval(tick, 1000);
	tick();
};
</script>

实现该功能的原理主要是定时器的原理，主要用到的：setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式,getHours() 方法可返回时间的小时字段,getSeconds() 方法可返回时间的秒。通过定时器的原理，每秒循环显示图片来实现这个效果。

效果如下：

              

小伙伴们赶紧动手试试吧