1. 程式人生 > >滾動數字時鐘

滾動數字時鐘

<!doctype html>

<html>

 

<head>

    <meta charset="utf-8">

    <title>滾動數字時鐘-jq22.com</title>

    <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>

    <style>

    * {

        margin: 0;

        padding: 0;

        box-sizing: border-box;

    }

 

    html,

    body {

        height: 100%;

        width: 100%;

    }

 

    body {

        background: black;

        display: -webkit-box;

        display: -ms-flexbox;

        display: flex;

        -webkit-box-pack: center;

        -ms-flex-pack: center;

        justify-content: center;

        -webkit-box-align: center;

        -ms-flex-align: center;

        align-items: center;

    }

 

    .clock {

        height: 20vh;

        color: white;

        font-size: 22vh;

        font-family: sans-serif;

        line-height: 20.4vh;

        display: -webkit-box;

        display: -ms-flexbox;

        display: flex;

        position: relative;

        /*background: green;*/

        overflow: hidden;

    }

 

    .clock::before,

    .clock::after {

        content: '';

        width: 7ch;

        height: 3vh;

        background: -webkit-linear-gradient(bottom, transparent, black);

        background: linear-gradient(to top, transparent, black);

        position: absolute;

        z-index: 2;

    }

 

    .clock::after {

        bottom: 0;

        background: -webkit-linear-gradient(top, transparent, black);

        background: linear-gradient(to bottom, transparent, black);

    }

 

    .clock>div {

        display: -webkit-box;

        display: -ms-flexbox;

        display: flex;

    }

 

    .tick {

        line-height: 17vh;

    }

 

    .tick-hidden {

        opacity: 0;

    }

 

    .move {

        -webkit-animation: move linear 1s infinite;

        animation: move linear 1s infinite;

    }

 

    @-webkit-keyframes move {

        from {

            -webkit-transform: translateY(0vh);

            transform: translateY(0vh);

        }

 

        to {

            -webkit-transform: translateY(-20vh);

            transform: translateY(-20vh);

        }

    }

 

    @keyframes move {

        from {

            -webkit-transform: translateY(0vh);

            transform: translateY(0vh);

        }

 

        to {

            -webkit-transform: translateY(-20vh);

            transform: translateY(-20vh);

        }

    }

    </style>

</head>

 

<body>

    <div class="clock">

        <div class="hours">

            <div class="first">

                <div class="number">0</div>

            </div>

            <div class="second">

                <div class="number">0</div>

            </div>

        </div>

        <div class="tick">:</div>

        <div class="minutes">

            <div class="first">

                <div class="number">0</div>

            </div>

            <div class="second">

                <div class="number">0</div>

            </div>

        </div>

        <div class="tick">:</div>

        <div class="seconds">

            <div class="first">

                <div class="number">0</div>

            </div>

            <div class="second infinite">

                <div class="number">0</div>

            </div>

        </div>

    </div>

    <script>

    var hoursContainer = document.querySelector('.hours')

    var minutesContainer = document.querySelector('.minutes')

    var secondsContainer = document.querySelector('.seconds')

    var tickElements = Array.from(document.querySelectorAll('.tick'))

    var last = new Date(0)

    last.setUTCHours(-1)

    var tickState = true

 

    function updateTime() {

        var now = new Date

        var lastHours = last.getHours().toString()

        var nowHours = now.getHours().toString()

        if (lastHours !== nowHours) {

            updateContainer(hoursContainer, nowHours)

        }

        var lastMinutes = last.getMinutes().toString()

        var nowMinutes = now.getMinutes().toString()

        if (lastMinutes !== nowMinutes) {

            updateContainer(minutesContainer, nowMinutes)

        }

        var lastSeconds = last.getSeconds().toString()

        var nowSeconds = now.getSeconds().toString()

        if (lastSeconds !== nowSeconds) {

            //tick()

            updateContainer(secondsContainer, nowSeconds)

        }

        last = now

    }

 

    function tick() {

        tickElements.forEach(t => t.classList.toggle('tick-hidden'))

    }

 

    function updateContainer(container, newTime) {

        var time = newTime.split('')

        if (time.length === 1) {

            time.unshift('0')

        }

        var first = container.firstElementChild

        if (first.lastElementChild.textContent !== time[0]) {

            updateNumber(first, time[0])

        }

        var last = container.lastElementChild

        if (last.lastElementChild.textContent !== time[1]) {

            updateNumber(last, time[1])

        }

    }

 

    function updateNumber(element, number) {

        //element.lastElementChild.textContent = number

        var second = element.lastElementChild.cloneNode(true)

        second.textContent = number

        element.appendChild(second)

        element.classList.add('move')

        setTimeout(function() {

            element.classList.remove('move')

        }, 990)

        setTimeout(function() {

            element.removeChild(element.firstElementChild)

        }, 990)

    }

    setInterval(updateTime, 100);

    </script>

</body>

 

</html>