js实现图片时钟--带翻转动画

最新推荐文章于 2023-04-25 14:57:46 发布

努力学习的阿奇

最新推荐文章于 2023-04-25 14:57:46 发布

阅读量1.6k

点赞数 5

分类专栏： js html 文章标签： js javascript html

本文链接：https://blog.csdn.net/qq_43302195/article/details/112006259

版权

js 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

html

3 篇文章 0 订阅

订阅专栏

js实现图片时钟–带反转动画

首先上图，先看效果
向上翻页的动画

1. 需求

根据当前系统时间来更改这个时钟，更改时间时，数字向上翻动，转成下一个数字。

2. 编程思路

如果只是根据系统时间来更改图片的话，其实很简单，就是获得每个数字图片的DOM，获得当前系统时间，然后更改其src为指定数字图片就可以了。但是这边想要加入这个反转动画，我们可以指定一个窗口，高度为一个数字图片的大小，再检测到时间变化时，我们在指定的数字图片后加入我们想要改变的数字图片结点，之后设置一个定时器用很小的时间不断向上移动，这样就能出这个上翻的动画效果，等上升了一个数字图片高度之后，删除上面的第一个结点。由此往复，即可实现。

3. 代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    *{
        padding: 0;
        margin: 0;
    }
    .number{
        height: 70px;
        overflow: hidden;
        float: left;
    }
    .number img{
        display: block;
    }
</style>
<body>

<div>
    <div id="shi1" class="number">
        <img  src="img/0.jpg" />
    </div>
    <div id="shi2" class="number">
        <img  src="img/0.jpg" />
    </div>
    <div class="number">
        <img src="img/c.jpg" />
    </div>
    <div id="fen1" class="number">
        <img  src="img/0.jpg" />
    </div>
    <div id="fen2" class="number">
        <img  src="img/0.jpg" />
    </div>
    <div class="number">
        <img src="img/c.jpg" />
    </div>

    <div id="miao1" class="number">
        <img  src="img/0.jpg" />
    </div>
    <div id="miao2" class="number">
        <img  src="img/0.jpg" />
    </div>

</div>

<script>

    var shi1D = document.getElementById('shi1');
    var shi2D = document.getElementById('shi2');
    var fen1D = document.getElementById('fen1');
    var fen2D = document.getElementById('fen2');
    var miao1D = document.getElementById('miao1');
    var miao2D = document.getElementById('miao2');

    function getTime() {
        var myDate = new Date();
        var mytime=myDate.toLocaleString('chinese', { hour12: false });
        //获得时间格式为2020/12/30 18:54:39 第一个split(' ')[1]获得18:54:39这个字符串，在对其.split('')获得[1,8,:,5,4,:,3,9]这个数组
        //由此得到,time[0]time[1]为小时，time[3]time[4]为分钟，time[6]time[7]为秒
        time = mytime.split(' ')[1].split('');
        // console.log(time);
        return new Array(time[0],time[1],time[3],time[4],time[6],time[7]);
    }

    var h1=0,h2=0,f1=0,f2=0,m1=0,m2=0;

    //更新小时1
    var ht1=0;
    setInterval(function () {
        var a = getTime();
        if (a[0]!=h1){
            h1=a[0];
            //获得当前的子结点
            var childImg = shi1D.getElementsByTagName('img')[0];
            var imgM = document.createElement('img');
            imgM.src='img/'+h1+'.jpg';
            shi1D.appendChild(imgM);
            var s1 = setInterval(function () {
                ht1+=1;
                shi1D.scrollTop=ht1;
                if (ht1>=70){
                    clearInterval(s1);
                    setTimeout(function () {
                        childImg.remove();
                        ht1=0;
                    },100)
                }
            },1)
        }
    },1000);
    //更新小时2
    var ht2=0;
    setInterval(function () {
        var a = getTime();
        if(a[1]!=h2){
            h2=a[1];
            //获得当前的子结点
            var childImg = shi2D.getElementsByTagName('img')[0];
            var imgM = document.createElement('img');
            imgM.src='img/'+h2+'.jpg';
            shi2D.appendChild(imgM);
            var m2 = setInterval(function () {
                ht2+=1;
                shi2D.scrollTop=mt1;
                if (ht2>=70){
                    clearInterval(m2);
                    setTimeout(function () {
                        childImg.remove();
                        ht2=0;
                    },100)
                }
            },1)
        }
    },1000);
    //更新分钟1
    var ft1=0;
    setInterval(function () {
        var a = getTime();
        if (a[2]!=f1){
            f1=a[2];
            //获得当前的子结点
            var childImg = fen1D.getElementsByTagName('img')[0];
            var imgM = document.createElement('img');
            imgM.src='img/'+f1+'.jpg';
            fen1D.appendChild(imgM);
            var m2 = setInterval(function () {
                ft1+=1;
                miao1D.scrollTop=ft1;
                if (ft1>=70){
                    clearInterval(m2);
                    setTimeout(function () {
                        childImg.remove();
                        ft1=0;
                    },100)
                }
            },1)
        }

    },1000);
    //更新分钟2
    var ft2=0;
    setInterval(function () {
        var a = getTime();
        if (a[3]!=f2){
            f2=a[3];
            //获得当前的子结点
            var childImg = fen2D.getElementsByTagName('img')[0];
            var imgM = document.createElement('img');
            imgM.src='img/'+f2+'.jpg';
            fen2D.appendChild(imgM);
            var m2 = setInterval(function () {
                ft2+=1;
                fen2D.scrollTop=ft2;
                if (ft2>=70){
                    clearInterval(m2);
                    setTimeout(function () {
                        childImg.remove();
                        ft2=0;
                    },100)
                }
            },1)
        }

    },1000);
    //更新秒1
    var mt1=0;
    setInterval(function () {
        var a = getTime();
       if (a[4]!=m1){
           m1=a[4];
           //获得当前的子结点
           var childImg = miao1D.getElementsByTagName('img')[0];
           var imgM = document.createElement('img');
           imgM.src='img/'+m1+'.jpg';
           miao1D.appendChild(imgM);
           var m2 = setInterval(function () {
               mt1+=1;
               miao1D.scrollTop=mt1;
               if (mt1>=70){
                   clearInterval(m2);
                   setTimeout(function () {
                       childImg.remove();
                       mt1=0;
                   },100)
               }
           },1)
       }
    },1000);
    //更新秒2
    var mt2=0;
    setInterval(function () {
        var a = getTime();
        //获得当前的子结点
        var childImg = miao2D.getElementsByTagName('img')[0];
        // miao2D.src='img/'+a[5]+'.jpg'
        var imgM = document.createElement('img');
        imgM.src='img/'+a[5]+'.jpg';
        miao2D.appendChild(imgM);
        var m2 = setInterval(function () {
            mt2+=1;
            // console.log(mt2);
            miao2D.scrollTop=mt2;
            if (mt2>=70){
                clearInterval(m2);
                setTimeout(function () {
                    childImg.remove();
                    mt2=0;
                },100)
            }
        },1)

    },1000);
</script>

</body>
</html>

至此，实现图片时钟完成，如有问题请留言。

原创不易，转载请说明出处。

努力学习的阿奇

关注

5
点赞
踩
20

收藏

觉得还不错? 一键收藏
2
评论
js实现图片时钟--带翻转动画

js实现图片时钟–带反转动画首先上图，先看效果1. 需求根据当前系统时间来更改这个时钟，更改时间时，数字向上翻动，转成下一个数字。2. 编程思路如果只是根据系统时间来更改图片的话，其实很简单，就是获得每个数字图片的DOM，获得当前系统时间，然后更改其src为指定数字图片就可以了。但是这边想要加入这个反转动画，我们可以指定一个窗口，高度为一个数字图片的大小，再检测到时间变化时，我们在指定的数字图片后加入我们想要改变的数字图片结点，之后设置一个定时器用很小的时间不断向上移动，这样就能出这个上翻的动画
复制链接

扫一扫