智能时钟

最新推荐文章于 2020-06-18 17:38:25 发布

leigangg

最新推荐文章于 2020-06-18 17:38:25 发布

阅读量281

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/leigangg/article/details/105259145

版权

js 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

智能时钟,需要自己找图片:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            background-color: #000;
        }
        img{
            height: 50px;
            width: 30px;
            vertical-align:middle
        }
        span{
            font-size: 30px;
            color: #ffa801;
            display:inline-block;
            height:100%;
            vertical-align:middle;
        }
    </style>
</head>
<body>
    <img src="img/0.jpg" alt="">
    <img src="img/1.jpg" alt="">
    <span>:</span>
    <img src="img/2.jpg" alt="">
    <img src="img/3.jpg" alt="">
    <span>:</span>
    <img src="img/4.jpg" alt="">
    <img src="img/5.jpg" alt="">
    <img src="img/6.jpg" alt="">
    <img src="img/7.jpg" alt="">
    <img src="img/8.jpg" alt="">
    <img src="img/9.jpg" alt="">

    <script>
        function toDou(n){
            if(n<10){
                return '0'+n;
            }else{
                return ''+n;
            }
        }
        var aImg = document.getElementsByTagName('img');
        // var str = '231933';
       function shijian(){
            var oDate = new Date();
            var str = toDou(oDate.getHours()) + toDou(oDate.getMinutes()) + toDou(oDate.getSeconds());
            // alert(str);
            for(var i = 0;i < aImg.length; i++){
                // 适配IE7的写法aImg[i].src = 'img/'+strcharAt(i)+'.jpg';
                aImg[i].src = 'img/'+str[i]+'.jpg';
            };
        };
        setInterval (shijian, 1000);
        shijian();
       
    </script>
</body>
</html>

leigangg

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
智能时钟

智能时钟,需要自己找图片:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&...
复制链接

扫一扫