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

デジタルテーブル特殊効果を実現するネイティブ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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • シンプルなデジタル時計を実現するJavaScript
  • JavaScript ベースのデジタル時計効果の実現

<<:  マークアップ言語 - CSS レイアウト

>>:  DockerコンテナにPythonアプリケーションをデプロイするプロセスの分析

推薦する

Navicat Premium が MySQL 8.0 に接続してエラー「1251」を報告する問題を解決する方法の分析

長い間何もしていなかった人は、努力をすると一生懸命働いていると思うようになります。 1. 問題Nav...

MySQL マスタースレーブ同期、トランザクションロールバックの実装原理

ビンログBinLog は、データベース テーブル構造の変更 (テーブルの作成、変更など) とテーブル...

MycliはMySQLコマンドライン愛好家にとって必須のツールです

マイクリMyCLI は、自動補完と構文の強調表示を備えた MySQL、MariaDB、および Per...

Vue を使用してパブリック アカウントの Web ページを開発する方法

目次プロジェクトの背景始めるvue-cliでプロジェクトを作成するモバイル適応についてnormali...

MySql でリモート接続を許可する方法

MySql でリモート接続を許可する方法この目標を達成するには、2つのことを行う必要がある。ユーザー...

docker-compose を使用して MySQL を実行する方法

ディレクトリ構造 。 │ .env │ docker-compose.yml │ └─mysql ├...

JavaScriptのスリープ関数の使用

目次1.スリープ機能2.タイムアウトを設定する3. 約束4. 非同期待機5. 1秒後に出力1、2秒後...

MySQL のクエリパフォーマンスに対する制限の影響

I. はじめにまず、MySQL のバージョンについて説明します。 mysql> バージョンを選...

MySQL の最適化: 高品質の SQL 文を書く方法

序文インターネット上にはデータベースの最適化に関する情報や方法が数多くありますが、その多くは品質にば...

ウェブページのカラーマッチングにおけるオーバーラップとソフトカラーマッチングの手法を詳しく説明

この記事には、細かい点は一切なく、カラーマッチングのテクニックをシェアするだけです。とてもシンプルで...

Windows 8 での MySQL Community Server 5.6 のインストールと設定のチュートリアル

この記事では、Windows 8 での MySQL5.6 のインストールと設定のチュートリアルを記録...

LinuxにRocketMQインスタンスをインストールする手順

1. JDKをインストールする1.1 現在の仮想マシン環境にJDKがあるかどうかを確認する rpm ...

Mysql マスタースレーブレプリケーションの注意事項の説明

1. マスター'x@xxxx:x'への接続エラー- 再試行時間: 60 再試行回数:...

JSの基本概念の詳細な紹介

目次1. JSの特徴1.1 マルチパラダイム1.2 説明1.3 シングルスレッド1.4 ノンブロッキ...

Vue Elementのテーブルコンポーネントをカプセル化する方法

Vue コンポーネントをカプセル化する場合でも、機能コンポーネントをクロスファンクショナルに使用しま...