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实现滚动效果的数字时钟的全部实例代码，代码很简单但是效果非常好，希望能帮助到有需要的你。
相关文章
其实，没那么强大的，不过，聊胜于无吧，并且还算管用，要是有谁再完善它就好了……2009-04-04
Node.js：Windows7下搭建的Node.js服务(来玩玩服务器端的javascript吧,这可不是前端js插件
什么是Node.js?还服务器端javascript?对于这个概念我在这篇文章不做解释，可以自己去搜索了解下，服务器端js不是新技术，只是最近的node.js的火爆让他爆发了，我会在以后的文章里解释什么是node.js。2011-06-06
下面小编就为大家带来一篇javascript中去除数组重复元素的实现方法【实例】。小编觉得挺不错的，现在分享给大家，也给大家做个参考，一起跟随小编过来看看吧2016-04-04
uni-app 是一个使用 vue.js 开发跨平台应用的前端框架,下面这篇文章主要给大家介绍了关于uniapp开发小程序的开发规范,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-07-07
回调函数是一段可执行的代码段，它作为一个参数传递给其他的代码，其作用是在需要的时候方便调用这段（回调函数）代码,这篇文章主要介绍了JS中的 回调函数（callback）,需要的朋友可以参考下2022-12-12
下面小编就为大家带来一篇JS判断是否在微信浏览器打开的简单实例(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-08
在JavaScript中replace函数作为字符串替换函数，这是一个威力强大的字符串操作函数，对于常见字符串操作的推荐用法。这篇随笔就来更加深入的理解它。2013-03-03
这篇文章主要介绍了JS简单判断函数是否存在的方法,涉及javascript函数运行与类型判定相关操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下2017-02-02
今天小编就为大家分享一篇解决layui弹框失效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
最近，在用一些web编辑器，发现插入一段mp3后，查看源代码，object标签中的param都被删除。下面我演示给大家看看。2009-03-03
最新评论