图片时钟html

最新推荐文章于 2024-08-01 16:15:33 发布

陌影-

最新推荐文章于 2024-08-01 16:15:33 发布

阅读量226

点赞数 1

文章标签： html

本文链接：https://blog.csdn.net/shi19970609/article/details/119326991

版权

<!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>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            width: 400px;
            height: 70px;
            margin: 200px auto;
            list-style: none;
        }

        li {
            float: left;
            width: 50px;
            height: 70px;
            position: relative;
            overflow: hidden;
        }

        div {
            position: absolute;
            left: 0;
            top: 0;
            width: 50px;
            height: 140px;
        }

        img {
            display: block;
        }
    </style>
</head>

<body>
    <ul>
        <li>
            <div>
                <img src="./img/0.jpg" alt="">
                <img src="./img/0.jpg" alt="">
            </div>
        </li>
        <li>
            <div>
                <img src="./img/0.jpg" alt="">
                <img src="./img/0.jpg" alt="">
            </div>
        </li>
        <li>
            <span><img src="./img/a.jpg" alt=""></span>
        </li>
        <li>
            <div>
                <img src="./img/0.jpg" alt="">
                <img src="./img/0.jpg" alt="">
            </div>
        </li>
        <li>
            <div>
                <img src="./img/0.jpg" alt="">
                <img src="./img/0.jpg" alt="">
            </div>
        </li>
        <li>
            <span><img src="./img/a.jpg" alt=""></span>
        </li>
        <li>
            <div>
                <img src="./img/0.jpg" alt="">
                <img src="./img/0.jpg" alt="">
            </div>
        </li>
        <li>
            <div>
                <img src="./img/0.jpg" alt="">
                <img src="./img/0.jpg" alt="">
            </div>
        </li>
    </ul>

    <script>
        let divs = document.querySelectorAll('div');
        let flashImg = document.querySelectorAll('span img');

        let kg = true;
        setInterval(() => {
            if (kg) {
                flashImg[0].src = './img/b.jpg'
                flashImg[1].src = './img/b.jpg'
            } else {
                flashImg[0].src = './img/a.jpg'
                flashImg[1].src = './img/a.jpg'
            }
            kg = !kg;
        }, 500);

        function addZero(num) {
            if (num < 10) {
                return "0" + num;
            } else {
                return "" + num;
            }
        }

        go();
        setInterval(go, 1000);
        function go() {
            let now = new Date();
            let hours = now.getHours();
            let min = now.getMinutes();
            let sec = now.getSeconds();
            let str = addZero(hours) + addZero(min) + addZero(sec);
            console.log(str); // 172019

            for (let i = 0; i < divs.length; i++) {

                if (divs[i].t != str.charAt(i)) {
                    // 给每个div设置一个自定义属性
                    divs[i].t = str.charAt(i);

                    let imgs = divs[i].querySelectorAll('img');
                    imgs[1].src = `./img/${str.charAt(i)}.jpg`;

                    let mytop = 0;
                    let timer = null;

                    timer = setInterval(() => {
                        mytop -= 5;
                        if (mytop <= -70) {
                            mytop = -70;
                            clearInterval(timer)
                        }
                        divs[i].style.top = mytop + "px";
                        if (mytop == - 70) {
                            imgs[0].src = `./img/${str.charAt(i)}.jpg`;
                            divs[i].style.top = 0;
                        }
                    }, 30);
                }

            }

        }
    </script>
</body>

</html>