javascript实现滚动效果的数字时钟实例
作者:daisy 时间:2024-04-29 13:39:50
网上关于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,滚动效果,数字时钟
0
投稿
猜你喜欢
超详细注释之OpenCV操作图像平移转换
2022-08-14 19:29:38
一个简单的JS显示日期代码
2009-02-10 12:34:00
Django路由层URLconf作用及原理解析
2023-09-21 13:33:04
Linux安装Pytorch1.8GPU(CUDA11.1)的实现
2021-12-20 10:02:00
python3实现猜数字游戏
2022-09-11 16:10:38
WEB页面工具语言XML应用分类之运用
2008-05-29 10:58:00
Python Pyecharts绘制桑基图分析用户行为路径
2022-06-07 02:47:57
分析Python中解析构建数据知识
2022-01-12 10:23:48
vue 解决异步数据更新问题
2024-04-30 10:45:28
Python OpenCV实现姿态识别的详细代码
2023-05-27 23:42:31
教你使用一行Python代码玩遍童年的小游戏
2021-05-15 10:14:00
python中wx将图标显示在右下角的脚本代码
2022-10-27 02:26:53
MySQL单表查询实例详解
2024-01-15 20:39:43
短视频(douyin)去水印工具的实现代码
2024-04-29 13:40:15
php比较两个指定的日期的实例讲解
2023-06-13 12:11:29
Python使用Selenium实现淘宝抢单的流程分析
2022-01-31 04:04:18
个人网站与动网整合非官方方法
2009-07-05 18:42:00
MySQL的指定范围随机数函数rand()的使用技巧
2024-01-17 15:25:50
Python实现向QQ群成员自动发邮件的方法
2021-08-16 13:41:33
keras绘制acc和loss曲线图实例
2023-10-30 13:10:52