原生js图片时钟运行代码



73 289 97



特效描述:原生js 图片时钟运行,原生js图片数字时钟运行,获取电脑本地时间时钟特效源代码。

代码结构

1. 引入JS

<script type="text/javascript" src="myself.js"></script>
<script type="text/javascript" src="myself.js"></script>

2. HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>时钟作业</title>
    <style>
        *{margin:0;padding:0;}
        ul{list-style:none;}
        #box{font-size: 60px;}
        #time{padding:20px;border:1px solid #222;background:#fff;margin:100px auto;height:173px;width:984px;}
        #time li{float:left;width:123px;height:173px;overflow:hidden;}
        #time li .num_img{position:relative;top:0;}
        #time img{display:block;}
    </style>
</head>
<script type="text/javascript">
    window.onload = function () {
        var box = document.getElementById('box');
        var time = document.getElementById('time');
        var oLi = time.getElementsByTagName('li');
        var len = oLi.length;
        var timer = '';
        var str = '';
        var oldTime = getTime();
        timeImg();
        clearInterval(timer);
        timer = setInterval(timeImg, 1000);
        function getTime() {
            var myTime = new Date();   //获取当前的系统时间
            var myHour = myTime.getHours();     //时
            var myMin = myTime.getMinutes();    //分
            var mySec = myTime.getSeconds();    //秒
            str = toTwo(myHour) + ':' + toTwo(myMin) + ':' + toTwo(mySec);
            return str;
        }
        function toTwo(a) {
            return a<10 ? '0'+a : ''+a;
        }
        function timeImg(){
            getTime();
            console.log(oldTime +'--'+ str);
//            box.innerHTML = str;
            for(var i=0; i<len; i++){
                oLi[i].getElementsByTagName('div')[0].style.top = 0;
                if(i==2 || i==5){
                    oLi[i].getElementsByTagName('img')[0].src = 'img/colon.jpg';
                    oLi[i].getElementsByTagName('img')[1].src = 'img/colon.jpg';
                }else{
                    oLi[i].getElementsByTagName('img')[0].src = 'img/'+oldTime.charAt(i)+'.jpg';
                    if( oldTime.charAt(i) == 9 ){
                        oLi[i].getElementsByTagName('img')[1].src = 'img/0.jpg';
                    }else{
                        oLi[i].getElementsByTagName('img')[1].src = 'img/'+str.charAt(i)+'.jpg';
                    }
                }
                if(str.charAt(i) !== oldTime.charAt(i)){
                    doMove(oLi[i].getElementsByTagName('div')[0], 'top', 20, -173);
                }
            }
            oldTime = str;
        }
    }
</script>
<body style="background:#ccc;">
<div id="box"></div>
<ul id="time">
    <li><div class="num_img"><img src="img/0.jpg" alt=""><img src="img/0.jpg" alt=""></div></li>
    <li><div class="num_img"><img src="img/0.jpg" alt=""><img src="img/0.jpg" alt=""></div></li>
    <li><div class="num_img"><img src="img/0.jpg" alt=""><img src="img/0.jpg" alt=""></div></li>
    <li><div class="num_img"><img src="img/0.jpg" alt=""><img src="img/0.jpg" alt=""></div></li>
    <li><div class="num_img"><img src="img/0.jpg" alt=""><img src="img/0.jpg" alt=""></div></li>
    <li><div class="num_img"><img src="img/0.jpg" alt=""><img src="img/0.jpg" alt=""></div></li>
    <li><div class="num_img"><img src="img/0.jpg" alt=""><img src="img/0.jpg" alt=""></div></li>
    <li><div class="num_img"><img src="img/0.jpg" alt=""><img src="img/0.jpg" alt=""></div></li>
</ul>
</body>
</html>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动 滚动条 页面滚动 滚动插件 滚动条插件 滚动条美化 自动滚动图片轮播 日期时间 时钟 日历 时间 日历插件 时间日期插件 时间日期插件 时间日期 文字滚动 文字无缝滚动 文字间歇滚动

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到