简易时钟翻页

今天周五，老板请假了也没有开周会，手上也没有什么事，就在工位刷掘金。看见掘金上有篇帖子写了一个时钟的翻页效果。于是打发时间自己也写了一个。和掘金上面的不同效果，只是做了一个简易的版本。还没来得及看贴子代码的实现。但是看效果要比我的做的精致。下周再去看下别人的具体代码。

div效果

    <div>时：<span class="h"></span></div>
    <div>分：<span class="m"></span></div>
    <div>秒：<span class="s"></span></div>
    <div>翻页时钟⏰</div>
    <div class="clock">
        <div class="hour">
            <div class="top"></div>
            <div class="button"></div>
            <div class="button-1"></div>
        </div>
        <div class="min">
            <div class="top"></div>
            <div class="button"></div>
            <div class="button-1"></div>
        </div>
        <div class="sec">
            <div class="top"></div>
            <div class="button"></div>
            <div class="button-1"></div>
        </div>
    </div>

js

    const h = document.getElementsByClassName('h')[0];
    const m = document.getElementsByClassName('m')[0];
    const s = document.getElementsByClassName('s')[0];



    const topDiv = document.getElementsByClassName('top');
    const buttonDiv = document.getElementsByClassName('button');
    const buttonCopyDiv = document.getElementsByClassName('button-1');

    let lastH = new Date().getHours(),
        lastM = new Date().getMinutes(),
        lastS = new Date().getSeconds();
    topDiv[0].innerHTML = lastH;
    buttonDiv[0].innerHTML = lastH;
    buttonCopyDiv[0].innerHTML = lastH;

    topDiv[1].innerHTML = lastM;
    buttonDiv[1].innerHTML = lastM;
    buttonCopyDiv[1].innerHTML = lastM;


    const getTimeRander = (num) => {
        let clock = window.requestAnimationFrame(getTimeRander);
        if (clock % 60 === 0) {
            const now = new Date();
            const hd = now.getHours();
            const hdd = hd > 12 ? `下午 ${hd - 12}` : `上午 ${hd}`;

            h.innerHTML = hdd;
            const md = now.getMinutes();
            m.innerHTML = md;
            const sd = now.getSeconds();
            s.innerHTML = sd;

            if (lastH !== hd) {
                buttonDiv[0].style.animation = 'flipAnimation 0.5s 1';
            }
            if (lastM !== md) {
                buttonDiv[1].style.animation = 'flipAnimation 0.5s 1';
            }
            if (lastS !== sd) {
                buttonDiv[2].style.animation = 'flipAnimation 0.5s 1';
            }

            // topDiv[0].innerHTML = hd;
            // topDiv[1].innerHTML = md;
            // topDiv[2].innerHTML = sd;
            // buttonDiv[0].innerHTML = hd;
            // buttonDiv[1].innerHTML = md;
            // buttonDiv[2].innerHTML = sd;
            // buttonCopyDiv[0].innerHTML = hd;
            // buttonCopyDiv[1].innerHTML = md;
            // buttonCopyDiv[2].innerHTML = sd;

            lastH = hd;
            lastM = md;
            lastS = sd;
        };

    }
    // setInterval(getTimeRander, 1000)
    getTimeRander();

    buttonDiv[0].addEventListener('webkitAnimationStart', function () {
        let h = new Date().getHours() <= 9 ? `0${new Date().getHours()}` : new Date().getHours();
        topDiv[0].innerHTML = h;
        buttonDiv[0].innerHTML = h;
        buttonCopyDiv[0].innerHTML = h;
    }, true)
    buttonDiv[0].addEventListener('webkitAnimationEnd', function () {
        buttonDiv[0].style.animation = 'none';
    }, true)


    buttonDiv[1].addEventListener('webkitAnimationStart', function () {
        let m = new Date().getMinutes() <= 9 ? `0${new Date().getMinutes()}` : new Date().getMinutes();
        topDiv[1].innerHTML = m;
        buttonDiv[1].innerHTML = m;
        buttonCopyDiv[1].innerHTML = m;
    }, true)
    buttonDiv[1].addEventListener('webkitAnimationEnd', function () {
        buttonDiv[1].style.animation = 'none';
    }, true)

    buttonDiv[2].addEventListener('webkitAnimationStart', function () {
        let s = new Date().getSeconds() <= 9 ? `0${new Date().getSeconds()}` : new Date().getSeconds();
        topDiv[2].innerHTML = s;
        buttonDiv[2].innerHTML = s
        buttonCopyDiv[2].innerHTML = s
    }, true)

    buttonDiv[2].addEventListener('webkitAnimationEnd', function () {
        buttonDiv[2].style.animation = 'none';
    }, true)

css

    .clock {
        display: flex;
        height: 300px;
        width: 900px;
        /* justify-content: center; */
        align-items: center;
        text-align: center;
    }

    .clock>div {
        flex: 1;
        height: 100%;
        display: flex;
        flex-direction: column;
        position: relative;
        margin-right: 10px;
    }

    .clock>div>div {
        height: 50%;
    }

    .clock>div>div:nth-of-type(1) {
        background: rgb(57, 58, 56);
    }

    .clock>div>div:nth-of-type(2) {
        background: rgb(57, 58, 56);
    }

    .hour {
        perspective: 1000px;
    }

    .top {
        font-size: 200px;
        line-height: 200px;
        color: #fff;
        font-weight: 600;
        line-height: 300px;
        overflow: hidden;
        margin-bottom: 3px;
        /* font-style:oblique; */
    }

    .button {
        height: 300px;
        transform-style: preserve-3d;
        transform-origin: top center;
        font-size: 200px;
        line-height: 200px;
        color: #fff;
        font-weight: 600;
        line-height: 0;
        overflow: hidden;
        margin-top: 3px;
        z-index: 2;
        /* font-style:oblique; */
    }

    @keyframes flipAnimation {
        0% {
            transform: perspective(700px) rotateX(0deg);
            opacity: 1;
        }

        50% {
            transform: perspective(700px) rotateX(90deg);
            opacity: 1;
        }

        100% {
            transform: perspective(700px) rotateX(180deg);
            opacity: 0;
        }
    }

    .button-1 {
        position: absolute;
        height: 300px;
        width: 100%;
        top: 50%;
        font-size: 200px;
        line-height: 200px;
        color: #fff;
        font-weight: 600;
        line-height: 0;
        overflow: hidden;
        margin-top: 3px;
        z-index: 1;
        background: rgb(57, 58, 56);
        /* font-style:oblique; */
    }

代码逻辑没有抽离封装，之后在完善一下吧。