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() 方法可返回时间的秒。通过定时器的原理,每秒循环显示图片来实现这个效果。
效果如下:
小伙伴们赶紧动手试试吧