デジタルテーブル特殊効果を実現するネイティブJS

この記事では、ネイティブ JS で実装されたデジタル時計エフェクトを紹介します。エフェクトは次のとおりです。

上記の数字は、次の 10 枚の画像を使用して生成されています。

実装コードは以下のとおりです。コピーして貼り付けてご利用ください。

<!DOCTYPE html>
<html>
 
<ヘッド>
    <meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=utf-8" />
    <title>デジタルテーブルの特殊効果を実現するネイティブ JS</title>
    <スタイル>
        体 {
            背景: 青;
            色: 白;
            フォントサイズ: 30px;
        }
 
        #div1 {
            幅: 220ピクセル;
            高さ: 36px;
            位置: 固定;
            左: 50%;
            上位: 50%;
            変換: translate(-50%, -50%);
            境界線: 1px #FFF 実線;
        }
 
        #div1 画像 {
            幅: 25px;
            高さ: 36px;
            位置: 相対的;
        }
    </スタイル>
    <スクリプト>
        window.onload = 関数（）{
            //すべての画像を取得します var aImg = document.getElementsByTagName('img');
            //ローカル時間オブジェクトを取得します。var oDate = new Date();
            //時間 + 分 + 秒 var prevStr = toZero(oDate.getHours()) +
                toZero(oDate.getMinutes()) +
                oDate の秒数をゼロにします。
            //次回のために文字列変数を宣言します var nextStr = '';
            // 同時に変化する秒数は複数桁になる可能性があるので、それを格納する配列を作成します。var arr = [];
            var タイマー = null;
 
            // i 番目の img 画像の src アドレスは、img の下の現在の時刻の i 番目の桁に対応する画像名です //104604=> charAt(i) を介してそれぞれ 1 から 6 までの文字を取得します。つまり、1、0、4、6、0、4 です
            (var i = 0; i < aImg.length; i++) の場合 {
                aImg[i].src = 'images/' + prevStr.charAt(i) + '.png';
            };
 
            // toChange メソッドを 1 秒ごとに実行するようにタイマーを設定します。setInterval(toChange, 1000);
 
            //次回取得関数toChange() {
                //ローカル時間オブジェクトを取得します。var oDate = new Date();
                //時間 + 分 + 秒 nextStr = toZero(oDate.getHours()) +
                    toZero(oDate.getMinutes()) +
                    oDate の秒数をゼロにします。
                //前回の時間と次回の時間を比較します toCom(prevStr, nextStr);
                //次の 1 秒を現在の時刻に割り当て、変更を続けます。prevStr = nextStr;
            };
            //前回の時間と次回の時間を比較する function toCom(str1, str2) {
                // 比較する前に、前の値をクリアして再割り当てします。arr = [];
                //最初の各桁を走査します for (var i = 0; i < str1.length; i++) {
                    // 1 つの文字が次の文字と異なる場合 if (str1.charAt(i) != str2.charAt(i)) {
                        //配列にプッシュします arr.push(i);
                    }
                }
                //画像反転を実行します startMove();
 
            };
            //画像反転関数 function startMove() {
                //画像の高さを36px、2番目の縮小を-4pxに設定
                var iSpeed = -4;
 
                //タイマーを設定する timer = setInterval(function () {
                    //配列内の最後の時刻と次の時刻が変更された文字列をループします for (var i = 0; i < arr.length; i++) {
                        //配列内の異なる文字に対応する名前の画像の高さが0に等しい場合
                        (aImg[arr[i]].offsetHeight == 0)の場合{
                            //変化速度を4pxずつ増加するように設定する
                            iスピード = 4;
                            //異なる文字の名前に対応する画像の位置は、img 内の次の時刻の i 番目の桁に対応する画像名に等しくなります //i は 2 つの時刻変更が配置されている桁を表し、arr[i] は特定の番号を取得します aImg[arr[i]].src = 'images/' + nextStr.charAt(arr[i]) + '.png';
                        }
                        //配列内の異なる文字の名前に対応する画像の高さは、そのコンテンツの高さから毎回4pxを引いた値に等しくなります。
                        //style.heightとoffsetHeightの高さに注意してください。aImg[arr[i]].style.height = aImg[arr[i]].offsetHeight + iSpeed + 'px';
                        //配列内の異なる文字の名前に対応する画像の上部の値は、そのコンテンツの高さの半分から 18px を引いた値に等しい
                        //画像が変わるたびに中央に表示されるようにするには、aImg[arr[i]].style.top = aImg[arr[i]].offsetHeight / 2 - 18 + 'px';
 
                        //画像の高さが最大の高さ36pxに達したときif (aImg[arr[i]].offsetHeight == 36) {
                            //タイマーをクリアする clearInterval(timer);
                        }
                    }
 
                }, 10);
            };
 
 
            // ローカル時刻を取得します。1 の位が 10 未満で、10 の位が 0 の場合、そのようなことはありません。カプセル化された関数 toZero(num) {
                （数値<10）の場合{
                    '0' + 数値を返します。
                } それ以外 {
                    '' + num を返します。
                }
            }
        };
    </スクリプト>
</head>
 
<本文>
    <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>
</本文>
 
</html>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: