js学习之定时器的使用

来源：互联网发布：淘宝买翡翠是真的吗编辑：程序博客网时间：2024/06/06 00:23

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

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

效果如下：

小伙伴们赶紧动手试试吧

阅读全文

1 0