Native JS to achieve digital table special effects

This article shares a digital clock effect implemented with native JS. The effect is as follows:

The numbers above are generated using the following 10 images:

The implementation code is as follows, you are welcome to copy and paste.

<!DOCTYPE html>
<html>
 
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Native JS to achieve digital table special effects</title>
    <style>
        body {
            background: blue;
            color: white;
            font-size: 30px;
        }
 
        #div1 {
            width: 220px;
            height: 36px;
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            border: 1px #FFF solid;
        }
 
        #div1 img {
            width: 25px;
            height: 36px;
            position: relative;
        }
    </style>
    <script>
        window.onload = function () {
            //Get all the pictures var aImg = document.getElementsByTagName('img');
            //Get the local time object var oDate = new Date();
            //Hours + minutes + seconds var prevStr = toZero(oDate.getHours()) +
                toZero(oDate.getMinutes()) +
                toZero(oDate.getSeconds());
            //Declare the string variable for the next time var nextStr = '';
            //The number of seconds that change at the same time may be multiple digits, so create an array to store it. var arr = [];
            var timer = null;
 
            //The src address of the i-th img picture is the picture name corresponding to the i-th digit of the current time under img //104604=>Get the characters from 1 to 6 respectively through charAt(i), that is, 1, 0, 4, 6, 0, 4
            for (var i = 0; i < aImg.length; i++) {
                aImg[i].src = 'images/' + prevStr.charAt(i) + '.png';
            };
 
            //Set the timer to execute the toChange method once every 1 second setInterval(toChange, 1000);
 
            //Get the next time function toChange() {
                //Get the local time object var oDate = new Date();
                //Hours + minutes + seconds nextStr = toZero(oDate.getHours()) +
                    toZero(oDate.getMinutes()) +
                    toZero(oDate.getSeconds());
                //Compare the previous time with the next time toCom(prevStr, nextStr);
                //Assign the next 1 second to the current time, and keep changing prevStr = nextStr;
            };
            //Compare the last time with the next time function toCom(str1, str2) {
                // Before comparison, clear the previous value and reassign arr = [];
                //Traverse each digit of the first time for (var i = 0; i < str1.length; i++) {
                    //If one character is different from the character corresponding to the next time if (str1.charAt(i) != str2.charAt(i)) {
                        //Push it into the array arr.push(i);
                    }
                }
                //Execute image flip startMove();
 
            };
            //Image flip function function startMove() {
                //Image height 36px, set the second reduction to -4px
                var iSpeed = -4;
 
                //Set the timer timer = setInterval(function () {
                    //Loop through the strings in the array whose last and next times have changed for (var i = 0; i < arr.length; i++) {
                        //If the image height of the name corresponding to the different characters in the array is equal to 0
                        if (aImg[arr[i]].offsetHeight == 0) {
                            //Set the change speed to increase by 4px
                            iSpeed = 4;
                            //The image position corresponding to the name of different characters is equal to the image name corresponding to the i-th digit of the next time in img //i represents the digit where the two time changes are located, arr[i] gets the specific number aImg[arr[i]].src = 'images/' + nextStr.charAt(arr[i]) + '.png';
                        }
                        //The height of the picture corresponding to the name of the different characters in the array is equal to its content height minus 4px each time
                        //Note the height of style.height and offsetHeight aImg[arr[i]].style.height = aImg[arr[i]].offsetHeight + iSpeed + 'px';
                        //The top value of the picture corresponding to the name of the different characters in the array is equal to half of its content height minus 18px
                        //To ensure that each time the picture changes, it can be displayed in the center aImg[arr[i]].style.top = aImg[arr[i]].offsetHeight / 2 - 18 + 'px';
 
                        //When the image height reaches the maximum height of 36pxif (aImg[arr[i]].offsetHeight == 36) {
                            //Clear timer clearInterval(timer);
                        }
                    }
 
                }, 10);
            };
 
 
            //Get the local time. If the unit digit is less than 10, and the tens digit is 0, there is no such thing. Here is the encapsulated function toZero(num) {
                if (num < 10) {
                    return '0' + num;
                } else {
                    return '' + num;
                }
            }
        };
    </script>
</head>
 
<body>
    <div id="div1">
        <img src="images/0.png" />
        <img src="images/0.png" />:
        <img src="images/0.png" />
        <img src="images/0.png" />:
        <img src="images/0.png" />
        <img src="images/0.png" />
    </div>
</body>
 
</html>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in: