图片时钟 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片时钟</title>
    <style type="text/css">
        img {
            display: inline-block;
            width: 30px;
            height: 50px;
        }
        div[class] {
            text-align: center;
            height: 150px;
            width: 820px;
            background-color: grey;
            margin: 0 auto;
        }
    </style>
    <script>
        function toDou(hms) {
            //日期相关转换为字符串,不足两位补足两位
            if(hms<10)
                hms ='0'+ hms;
            else
                hms = ''+ hms;
            return hms;
        }
        function tick(){
            var oDate = new Date();
            var aImg = document.getElementsByTagName('img');
            var str1 = toDou(oDate.getFullYear()) + toDou(oDate.getMonth()) + toDou(oDate.getDate()) + oDate.getDay();
            var str2 = toDou(oDate.getHours()) + toDou(oDate.getMinutes()) + toDou(oDate.getSeconds());
            var str = str1+str2;
            for(var i = 0; i < aImg.length; i++)
            {
                //aImg[i].src = 'images/'+ str[i] + '.jpg';
                aImg[i].src = './images/'+ str.charAt(i) + '.jpg';
                //str.charAt(i)是字符串取某个字符的方法，兼容所有浏览器，而str[i]存在兼容性问题
            }
        }
        window.onload = function(){
            var oDate2 = new Date();
            setInterval(tick,1000);
            tick();//默认显示页面以后才执行window.onload 然后每秒执行一次定时器 为避免刚开始显示00：00：00 需要在window.onload里面手动执行一次定时器函数
        };
    </script>
</head>
<body style="font-size:60px;" >
<div>
    <div class="up">
        <img src="./images/0.jpg"/>
        <img src="./images/0.jpg"/>
        <img src="./images/0.jpg"/>
        <img src="./images/0.jpg"/>
        年
        <img src="./images/0.jpg"/>
        <img src="./images/0.jpg"/>
        月
        <img src="./images/0.jpg"/>
        <img src="./images/0.jpg"/>
        日
        星期
        <img src="./images/0.jpg"/>
        <br/>
    </div>
    <div class="down">
        <img src="../images/0.jpg"/>
        <img src="../images/0.jpg"/>
        :
        <img src="../images/0.jpg"/>
        <img src="../images/0.jpg"/>
        :
        <img src="../images/0.jpg"/>
        <img src="../images/0.jpg"/>
    </div>

</div>
</body>
</html>

 

posted @ 2017-11-20 16:19  我将枕中记忆抹去任岁月浮光掠影  阅读(249)  评论(0)  编辑  收藏  举报