原生JS實現(xiàn)數(shù)碼表特效

更新時間：2021年10月15日 08:39:23 作者：aiguangyuan

這篇文章主要為大家詳細介紹了原生JS實現(xiàn)數(shù)碼表特效，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文分享一個用原生JS實現(xiàn)的數(shù)碼時鐘特效，效果如下：

上面的數(shù)字是用的圖片生成的，共10張圖片如下：

實現(xiàn)代碼如下，歡迎大家復(fù)制粘貼。

<!DOCTYPE html>
<html>
 
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>原生JS實現(xiàn)數(shù)碼表特效</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 () {
            //獲取所有的圖片
            var aImg = document.getElementsByTagName('img');
            //獲取本地進間對象
            var oDate = new Date();
            //小時+分鐘+秒
            var prevStr = toZero(oDate.getHours()) +
                toZero(oDate.getMinutes()) +
                toZero(oDate.getSeconds());
            //聲明下一次時間的字符串變量
            var nextStr = '';
            //同一時間變化的不僅僅秒數(shù),有可能是多位數(shù)，建數(shù)組存儲
            var arr = [];
            var timer = null;
 
            //第i個img圖片的src地址為img下當(dāng)前時間第i位數(shù)所對應(yīng)的圖片名稱
            //104604=>通過charAt(i)分別獲得1到6位的字符,即1,0,4,6,0,4
            for (var i = 0; i < aImg.length; i++) {
                aImg[i].src = 'images/' + prevStr.charAt(i) + '.png';
            };
 
            //設(shè)置定時器，1秒鐘執(zhí)行1次toChange方法
            setInterval(toChange, 1000);
 
            //獲取下一次的時間
            function toChange() {
                //獲取本地進間對象
                var oDate = new Date();
                //小時+分鐘+秒
                nextStr = toZero(oDate.getHours()) +
                    toZero(oDate.getMinutes()) +
                    toZero(oDate.getSeconds());
                //將上一次的時間和下一次的時間做對比
                toCom(prevStr, nextStr);
                //把下1秒的時間賦給當(dāng)前，不斷變化
                prevStr = nextStr;
            };
            //上一次的時間和下一次的時間對比函數(shù)
            function toCom(str1, str2) {
                //比較之前，將之前的清空，重新賦值
                arr = [];
                //遍歷第1次時間的每1位數(shù)字
                for (var i = 0; i < str1.length; i++) {
                    //如果有1位字符與下一次時間對應(yīng)的字符不同
                    if (str1.charAt(i) != str2.charAt(i)) {
                        //將它壓入數(shù)組中
                        arr.push(i);
                    }
                }
                //執(zhí)行圖片翻轉(zhuǎn)
                startMove();
 
            };
            //圖片翻轉(zhuǎn)函數(shù)
            function startMove() {
                //圖片高度36px,設(shè)定第次減少-4px
                var iSpeed = -4;
 
                //設(shè)定定時器
                timer = setInterval(function () {
                    //循環(huán)遍歷數(shù)組中上一次時間和下一次時間發(fā)生變化的字符串
                    for (var i = 0; i < arr.length; i++) {
                        //如果數(shù)組中不同的字符所對應(yīng)名稱的圖片高度等于0
                        if (aImg[arr[i]].offsetHeight == 0) {
                            //將變化速度設(shè)為增加4px
                            iSpeed = 4;
                            //不同的字符所對應(yīng)名稱的圖片位置等于img里下一次時間第i位數(shù)所對應(yīng)的圖片名稱
                            //i代表兩次時間變化所在的數(shù)字位數(shù),arr[i]得出具體數(shù)字
                            aImg[arr[i]].src = 'images/' + nextStr.charAt(arr[i]) + '.png';
                        }
                        //數(shù)組中不同的字符所對應(yīng)名稱的圖片的高度等于它內(nèi)容高度每次減4px
                        //注意style.height和offsetHeight的高度
                        aImg[arr[i]].style.height = aImg[arr[i]].offsetHeight + iSpeed + 'px';
                        //數(shù)組中不同的字符所對應(yīng)名稱的圖片的top值等于它內(nèi)容高度1半減18px
                        //以保證每次變化圖片都可以居中顯示
                        aImg[arr[i]].style.top = aImg[arr[i]].offsetHeight / 2 - 18 + 'px';
 
                        //當(dāng)圖片的高度達到最大高度36px時
                        if (aImg[arr[i]].offsetHeight == 36) {
                            //清除定時器
                            clearInterval(timer);
                        }
                    }
 
                }, 10);
            };
 
 
            //獲取本地時間個位數(shù)不滿10，而十位數(shù)為0是沒有的，此處封裝函數(shù)補全
            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>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: