javascript实现滚动效果的数字时钟实例
更新时间:2016年07月21日 12:04:28 投稿:daisy
这篇文章主要是介绍使用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="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实现滚动效果的数字时钟的全部实例代码,代码很简单但是效果非常好,希望能帮助到有需要的你。
相关文章
不用AJAX和IFRAME,说说真正意义上的ASP+JS无刷新技术
注明:以下方法都经过实例和开发的长期验证,其实这些技术早就有,今天只不过自己归纳一下2008-09-09基于JavaScript实现快速转换文本语言(繁体中文和简体中文)
这篇文章主要介绍了基于JavaScript实现快速切换正体中文和简体中文,需要的朋友可以参考下2016-03-03
最新评论