网上关于javascript实现数字时钟效果的实例很多，但是本文给大家介绍的是滚动效果的数字时钟。小编觉得效果很炫，下面分享给大家。

先来看看很炫的效果

下面是代码实例

javascript代码部分：

window.onload=function(){ function toDou(n){ return n<10"+n; } var oImg=document.getElementsByTagName("img"); setInterval(clock,1000); clock() function clock(){ var oDate=new Date(); var oH=oDate.getHours(); var oF=oDate.getMinutes(); var oM=oDate.getSeconds(); var str=toDou(oH)+toDou(oF)+toDou(oM); for(var i=0;i<oImg.length;i++){ move(oImg[i],{"marginTop":-35*str.charAt(i)}); } } }

div+css布局部分：

<ul> <li><img src="img/num.png" alt="javascript很炫的数字时钟滚动效果" /></li> <li><img src="img/num.png" alt="javascript很炫的数字时钟滚动效果" /></li> <li>:</li> <li><img src="img/num.png" alt="javascript很炫的数字时钟滚动效果" /></li> <li><img src="img/num.png" alt="javascript很炫的数字时钟滚动效果" /></li> <li>:</li> <li><img src="img/num.png" alt="javascript很炫的数字时钟滚动效果" /></li> <li><img src="img/num.png" alt="javascript很炫的数字时钟滚动效果" /></li> </ul> *{ padding:0; margin:0; list-style:none;} ul{width:200px; margin: 100px auto;} li{ float:left; height:35px; overflow:hidden; line-height:35px;}

总结

以上就是关于用javascript实现滚动效果的数字时钟的全部实例代码，代码很简单但是效果非常好，希望能帮助到有需要的你。