图片时钟

最新推荐文章于 2021-01-25 15:05:47 发布

alo_ne

最新推荐文章于 2021-01-25 15:05:47 发布

阅读量261

点赞数 1

分类专栏： js-案例

本文链接：https://blog.csdn.net/alo_ne/article/details/106516670

版权

js-案例专栏收录该内容

25 篇文章 0 订阅

订阅专栏

在这里插入图片描述

思路：
1、现在页面上布局出00:00:00的布局样式
2、js中获取上面的6张图片
3、封装一个函数在函数里面获取时分秒
4、将获取的时分秒连接成字符串如202716
5、遍历图片，将步骤4的每个数赋给图片的src
6、启用定时器即可

    <style>
        body {
            background-color: black;
        }

        span {
            color: white;
        }

        img {
            vertical-align: middle;
        }
    </style>

<body>
    <img src="img/0.png" alt="">
    <img src="img/0.png" alt="">
    <span>:</span>
    <img src="img/0.png" alt="">
    <img src="img/0.png" alt="">
    <span>:</span>
    <img src="img/0.png" alt="">
    <img src="img/0.png" alt="">

    <script>
        let img = document.querySelectorAll('img')
        function go() {
            var now = new Date()
            var hou = now.getHours();
            var min = now.getMinutes();
            var sec = now.getSeconds();
            let str = num(hou)+num(min)+num(sec)
   for (let i = 0; i < img.length; i++) {
img[i].src = `img/${str.substring(i,i+1)}.png`
       
   }
            setInterval(go,1000)
            // 为了补0 可以用三元在后面补  也可以封装函数
        }
        go()
        function num(num){
            return num <10?"0"+num :''+num
        }
    </script>

这个案例的难点是遍历每个图片之后把对应的图片赋值

alo_ne

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
图片时钟

思路：1、现在页面上布局出00:00:00的布局样式2、js中获取上面的6张图片3、封装一个函数在函数里面获取时分秒4、将获取的时分秒连接成字符串如2027165、遍历图片，将步骤4的每个数赋给图片的src6、启用定时器即可 <style> body { background-color: black; } span { color: white; ...
复制链接

扫一扫