这篇文章主要是介绍使用javascript来实现数字时钟滚动的效果，非常实用，有需要的朋友们可以来参考学习。
网上关于javascript实现数字时钟效果的实例很多，但是本文给大家介绍的是滚动效果的数字时钟。小编觉得效果很炫，下面分享给大家。
先来看看很炫的效果
下面是代码实例
javascript代码部分：
window.onload=function(){ function toDou(n){ return n<10?"0"+n:""+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="https://www.jb51.net/img/num.png" alt="javascript很炫的数字时钟滚动效果" /></li> <li><img src="https://www.jb51.net/img/num.png" alt="javascript很炫的数字时钟滚动效果" /></li> <li>:</li> <li><img src="https://www.jb51.net/img/num.png" alt="javascript很炫的数字时钟滚动效果" /></li> <li><img src="https://www.jb51.net/img/num.png" alt="javascript很炫的数字时钟滚动效果" /></li> <li>:</li> <li><img src="https://www.jb51.net/img/num.png" alt="javascript很炫的数字时钟滚动效果" /></li> <li><img src="https://www.jb51.net/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实现滚动效果的数字时钟的全部实例代码，代码很简单但是效果非常好，希望能帮助到有需要的你。
您可能感兴趣的文章: