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 前的按键判断代码
Mar 19 Javascript
基于JavaScript实现继承机制之调用call()与apply()的方法详解
May 07 Javascript
javascript学习笔记(六)数据类型和JSON格式
Oct 08 Javascript
使用jQuery.form.js/springmvc框架实现文件上传功能
May 12 Javascript
快速入门Vue
Dec 19 Javascript
Angularjs中的ui-bootstrap的使用教程
Feb 19 Javascript
JavaScript中最常见的三个面试题解析
Mar 04 Javascript
JavaScript创建对象的七种方式(推荐)
Jun 26 Javascript
解决VUE框架 导致绑定事件的阻止冒泡失效问题
Feb 24 Javascript
js获取form表单中name属性的值
Feb 27 Javascript
js实现碰撞检测
Jan 29 Javascript
原生JS封装vue Tab切换效果
Apr 28 Vue.js
如何用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连接Oracle for NT 远程数据库
2006/10/09 PHP
php单例模式示例分享
2015/02/12 PHP
php中array_fill函数的实例用法
2021/03/02 PHP
在chrome浏览器中,防止input[text]和textarea在聚焦时出现黄色边框的解决方法
2011/05/24 Javascript
jQuery中is()方法用法实例
2015/01/06 Javascript
浅析 NodeJs 的几种文件路径
2017/06/07 NodeJs
JavaScript实现选中文字提示新浪微博分享效果
2017/06/15 Javascript
JavaScript程序设计高级算法之动态规划实例分析
2017/11/24 Javascript
vue点击input弹出带搜索键盘并监听该元素的方法
2018/08/25 Javascript
对angular4子路由&amp;辅助路由详解
2018/10/09 Javascript
一步步教你利用Docker设置Node.js
2018/11/20 Javascript
layer提示框添加多个按钮选择的实例
2019/09/12 Javascript
JS控制只能输入数字并且最多允许小数点两位
2019/11/24 Javascript
如何在面试中手写出javascript节流和防抖函数
2020/10/22 Javascript
vue+iview实现文件上传
2020/11/17 Vue.js
[42:11]TNC vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
详解Python多线程Selenium跨浏览器测试
2017/04/01 Python
python中 logging的使用详解
2017/10/25 Python
python3+PyQt5 创建多线程网络应用-TCP客户端和TCP服务器实例
2019/06/17 Python
python返回数组的索引实例
2019/11/28 Python
matplotlib.pyplot画图并导出保存的实例
2019/12/07 Python
PyCharm最新激活码(2020/10/27全网最新)
2020/10/27 Python
python实现文件分片上传的接口自动化
2020/11/19 Python
css 如何让背景图片拉伸填充避免重复显示
2013/07/11 HTML / CSS
捷克领先的户外服装及配件市场零售商:ALPINE PRO
2018/01/09 全球购物
加拿大折扣、优惠券和交易网站:WagJag
2018/02/07 全球购物
联强国际笔试题面试题
2013/07/10 面试题
儿科护士自我鉴定
2013/10/14 职场文书
体育口号大全
2014/06/18 职场文书
大学生毕业评语
2014/12/31 职场文书
客房部经理岗位职责
2015/02/02 职场文书
行政人事专员岗位职责
2015/04/07 职场文书
如何将JavaScript将数组转为树形结构
2021/06/02 Javascript
Django使用echarts进行可视化展示的实践
2021/06/10 Python
在 Python 中利用 Pool 进行多线程
2022/04/24 Python
nginx配置限速限流基于内置模块
2022/05/02 Servers