网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的考试资料：

　

标题 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" /></li>
    <li><img src="img/num.png" /></li>
    <li>:</li>
    <li><img src="img/num.png" /></li>
    <li><img src="img/num.png" /></li>
    <li>:</li>
    <li><img src="img/num.png" /></li>
    <li><img src="img/num.png" /></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实现滚动效果的数字时钟的全部实例代码，代码很简单但是效果非常好，希望能帮助到有需要的你。
随便看

　

在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。

　

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间：2025/5/15 7:50:58