原生js圖片時鐘運行代碼



77 306 103



特效描述:原生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

加群請備注:從官網了解到

老夫子电子