デジタルテーブル特殊効果を実現するネイティブ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アプリケーションをデプロイするプロセスの分析

推薦する

MySQLコマンドプロンプトで入力エラーが発生したときに前のコマンドを修正する方法

目次現在の問題解決プロセス具体的な手順解決した事件現在の問題MySQL コマンド プロンプトに複数行...

vue-nuxt ログイン認証の実装

目次導入リンク始めるコードを読み進めてくださいプロキシ設定傍受を要求する異なるプレフィックスを持つイ...

Ubuntu 20.04 LTS で Java 開発環境を構成する

Java開発キットjdkをダウンロードするJDK のダウンロード アドレスはhttp://www.o...

ウェブサイトでページコンテンツや情報を直接コピーできない問題を解決する方法

最近では、多くのウェブサイトでは、ページ上の特定のコンテンツや情報を直接コピーすることは許可されてお...

Linux での nginx のインストール、展開、使用方法の詳細な説明

目次1. ダウンロード2. 展開3. Nginxログ関連の設定4. ファイルダウンローダーとして n...

vue+elementui+vuex+sessionStorage を使用して履歴タグ メニューを実装するためのサンプル コード

一般的には、左側にメニューがあった後、ページの上部に履歴タブ メニューを追加する必要があります。他の...

MySQL 8.0.13 のインストールと設定方法のグラフィックチュートリアル (Win10 の場合)

MySQL 8.0.13 のインストールと設定方法を皆さんと共有したいと思います。お役に立てれば幸...

カレンダー効果を実現するための Bootstrap+JQuery

この記事では、カレンダー効果を実現するためのBootstrap+Jqueryの具体的なコードを参考ま...

CentOS インストール mysql5.7 詳細チュートリアル

この記事では、参考までに、centOSにmysql5.7をインストールする詳細な手順を紹介します。具...

ページ切り替え効果を実現するJSコード

この記事の例では、ページ切り替え効果を実現するためのJSコードの具体的なコードを参考までに共有してい...

完璧なアロエベラジェルを選ぶには?完璧なアロエベラジェルの本物と偽物の見分け方

最新のパーフェクト アロエ ベラ ジェルのパッケージ ボックスには、赤いフォントで完璧な英語の文字が...

div画像マーキーシームレス接続実装コード

コードをコピーコードは次のとおりです。 <html> <ヘッド> <ス...

JavaScript プロトタイプの詳細

目次1. 概要1.1 プロトタイプとは何ですか? 1.2 プロトタイプを入手する2. プロトタイプの...

HTML でランダムロールコーラーを実装するためのサンプルコード

この点呼装置は簡易版であり、自動停止の必要性を考慮していないため、点呼を開始した後、停止ボタンをクリ...

Nginxポーリングアルゴリズムの基本的な実装方法の詳細な説明

ポーリングアルゴリズムの紹介多くの人が職場で nginx を使用しており、その設定に精通しています。...