javascript实现滚动效果的数字时钟实例


Posted in Javascript onJuly 21, 2016

网上关于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实现滚动效果的数字时钟的全部实例代码,代码很简单但是效果非常好,希望能帮助到有需要的你。

Javascript 相关文章推荐
html 锁定页面(js遮罩层弹出div效果)
Oct 27 Javascript
浅析jQuery的链式调用之each函数
Dec 03 Javascript
jQuery焦点图切换特效插件封装实例
Aug 18 Javascript
简洁Ajax函数处理(示例代码)
Nov 15 Javascript
js中精确计算加法和减法示例
Mar 28 Javascript
详解AngularJS中的作用域
Jun 17 Javascript
AngularJS基础 ng-keypress 指令简单示例
Aug 02 Javascript
微信小程序 使用canvas制作K线实例详解
Jan 12 Javascript
解决webpack -p压缩打包react报语法错误的方法
Jul 03 Javascript
es7学习教程之Decorators(修饰器)详解
Jul 21 Javascript
vue中动态添加class类名的方法
Sep 05 Javascript
基于iview的router常用控制方式
May 30 Javascript
如何用JS判断两个数字的大小
Jul 21 #Javascript
AngularJs基本特性解析(一)
Jul 21 #Javascript
jQuery表单验证插件解析(推荐)
Jul 21 #Javascript
JavaScript 数组- Array的方法总结(推荐)
Jul 21 #Javascript
完美JQuery图片切换效果的简单实现
Jul 21 #Javascript
jQuery的ajax下载blob文件
Jul 21 #Javascript
picLazyLoad 实现图片延时加载(包含背景图片)
Jul 21 #Javascript
You might like
PHP-Java-Bridge使用笔记
2014/09/22 PHP
Symfony页面的基本创建实例详解
2015/01/26 PHP
Apache启动报错No space left on device: AH00023该怎么解决
2015/10/16 PHP
PHP Echo字符串的连接格式
2016/03/07 PHP
php注册系统和使用Xajax即时验证用户名是否被占用
2017/08/31 PHP
Thinkphp5框架异常处理操作实例分析
2020/06/03 PHP
javascript Firefox与IE 替换节点的方法
2010/02/24 Javascript
Javascript中正则表达式的全局匹配模式分析
2011/04/26 Javascript
jQuery页面图片伴随滚动条逐渐显示的小例子
2013/03/21 Javascript
js阻止冒泡及jquery阻止事件冒泡示例介绍
2013/11/19 Javascript
JS判断表单输入是否为空(示例代码)
2013/12/23 Javascript
clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切
2015/10/10 Javascript
js面向对象的写法
2016/02/19 Javascript
JavaScript 消息框效果【实现代码】
2016/04/27 Javascript
jQuery使用getJSON方法获取json数据完整示例
2016/09/13 Javascript
TypeScript入门-基本数据类型
2017/03/28 Javascript
jquery获取链接地址和跳转详解(推荐)
2017/08/15 jQuery
javascript头像上传代码实例
2019/09/28 Javascript
序列化模块json代码实例详解
2020/03/03 Javascript
js实现从右往左匀速显示图片(无缝轮播)
2020/06/29 Javascript
[02:42]DOTA2城市挑战赛收官在即 四强之争风起云涌
2018/06/05 DOTA
[01:15]PWL S2开团时刻第二期——他们杀 我就白给
2020/11/25 DOTA
Python实现Tab自动补全和历史命令管理的方法
2015/03/12 Python
Python利用lxml模块爬取豆瓣读书排行榜的方法与分析
2019/04/15 Python
L’Artisan Parfumeur官网:法国香水品牌
2020/08/11 全球购物
留学自荐信
2013/10/10 职场文书
应届毕业生的个人自我鉴定
2013/10/24 职场文书
妇女儿童发展规划实施方案
2014/03/16 职场文书
外贸业务员求职信
2014/06/16 职场文书
学校政风行风评议工作总结
2014/10/21 职场文书
检讨书怎么写
2015/01/23 职场文书
爱国影片观后感
2015/06/18 职场文书
公司致全体员工的感谢信
2019/06/24 职场文书
Python语言规范之Pylint的详细用法
2021/06/24 Python
死磕 java同步系列之synchronized解析
2021/06/28 Java/Android
MyBatis在注解上使用动态SQL方式(@select使用if)
2022/07/07 Java/Android