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 相关文章推荐
JQuery 无废话系列教程(一) jquery入门 [推荐]
Jun 23 Javascript
js常用代码段整理
Nov 30 Javascript
Google Dart编程语法和基本类型学习教程
Nov 27 Javascript
如何在指定的地方插入html内容和文本内容
Dec 23 Javascript
js中函数调用的两种常用方法使用介绍
Jul 17 Javascript
实例代码讲解jquery easyui动态tab页
Nov 17 Javascript
Bootstrap学习笔记之js组件(4)
Jun 12 Javascript
jqPlot jQuery绘图插件的使用
Jun 18 Javascript
Javascript 创建类并动态添加属性及方法的简单实现
Oct 20 Javascript
AngularJS中如何使用echart插件示例详解
Oct 26 Javascript
JS中offset和匀速动画详解
Feb 06 Javascript
node Buffer缓存区常见操作示例
May 04 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实现中文字符截取防乱码方法汇总
2015/04/29 PHP
为你总结一些php信息函数
2015/10/21 PHP
gearman中worker常驻后台,导致MySQL server has gone away的解决方法
2020/02/27 PHP
Javascript select控件操作大全(新增、修改、删除、选中、清空、判断存在等)
2008/12/19 Javascript
jQuery遍历Form示例代码
2013/09/03 Javascript
JQuery插件开发示例代码
2013/11/06 Javascript
JavaScript实现级联菜单的方法
2015/06/29 Javascript
jquery实现的伪分页效果代码
2015/10/29 Javascript
jQuery ajax方法传递中文时出现中文乱码的解决方法
2016/07/25 Javascript
jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
2017/04/11 jQuery
js实现鼠标拖拽多选功能示例
2017/08/01 Javascript
jQuery中each循环的跳出和结束实例
2017/08/16 jQuery
vue实现的仿淘宝购物车功能详解
2019/01/27 Javascript
使用Three.js实现太阳系八大行星的自转公转示例代码
2019/04/09 Javascript
jquery 回调操作实例分析【回调成功与回调失败的情况】
2019/09/27 jQuery
Vue快速实现通用表单验证功能
2019/12/05 Javascript
JavaScript Html实现移动端红包雨功能页面
2021/01/10 Javascript
Windows下Python2与Python3两个版本共存的方法详解
2017/02/12 Python
浅谈python中np.array的shape( ,)与( ,1)的区别
2018/06/04 Python
python set内置函数的具体使用
2019/07/02 Python
Python叠加两幅栅格图像的实现方法
2019/07/05 Python
Django Rest framework频率原理与限制
2019/07/26 Python
python tornado修改log输出方式
2019/11/18 Python
django实现web接口 python3模拟Post请求方式
2019/11/19 Python
关于numpy数组轴的使用详解
2019/12/05 Python
python 基于opencv去除图片阴影
2021/01/26 Python
20行代码教你用python给证件照换底色的方法示例
2021/02/05 Python
解决pip安装tensorflow中出现的no module named tensorflow.python 问题方法
2021/02/20 Python
J.Crew官网:美国知名休闲服装品牌
2017/05/19 全球购物
美国校园市场:OCM
2017/06/08 全球购物
淘宝店策划方案
2014/06/07 职场文书
住院医师规范化培训实施方案
2014/06/12 职场文书
2015年节能降耗工作总结
2015/05/22 职场文书
2016年习总书记讲话学习心得体会
2016/01/20 职场文书
在vue中import()语法不能传入变量的问题及解决
2022/04/01 Vue.js
Python使用华为API为图像设置多个锚点标签
2022/04/12 Python