デジタル時計効果を実現するJavaScript

<本文>
    <div class="wrapper">
        <div class="column">
            <!-- この div は 0、1、または 2 の 10 の位を表します。 -->
            <div>0</div>
            <div>1</div>
            <div>2</div>
        </div>
        <!-- 次の内容は HTML コードで記述するには冗長すぎるため、js を使用して記述します -->
        <div class="列 10"></div>
        <div class="coln">:</div>
        <div class="列 6"></div>
        <div class="列 10"></div>
        <div class="coln">:</div>
        <div class="列 6"></div>
        <div class="列 10"></div>
    </div>
</本文>

*{
     マージン: 0;
     パディング: 0;
}
html,本文{
     高さ: 100%;
     幅: 100%;
     背景色: #0e141b;
    オーバーフロー: 非表示;
    /* オーバーフローを非表示に設定 */
}
.ラッパー{
    テキスト配置: 中央;
    幅: 100%;
}
.wrapper .column、
.ラッパー .coln{
    表示: インラインブロック;
    垂直方向の位置合わせ: 上;
    色: rgba(224,230,235,0.89);
    フォントサイズ: 86px;
    行の高さ: 86px;
    フォントの太さ: 300;
}
。カラム{
    遷移: すべて 300 ミリ秒のイーズイン。
}
.coln{
    /* コロンの位置 */
    変換: translateY(calc(50vh - 83px));
}
/* 以下は異なるクラス名に対応する透明度です*/
。見える{
    不透明度: 1;
}
。近い{
    不透明度: 0.25;
}
。遠い{
    不透明度: 0.15;
}
。距離{
    不透明度: 0.05;
}

関数 Index(dom, use) {
    // 渡された DOM 要素を配列に変換します。this.column = Array.from(dom);
    // use をグローバル状態に転送します。これは、表示される時間システムが 112 時間か 24 時間かを決定するためです。this.use = use;
    // この配列は、後で設定されるクラス名です。 this.classList = ['visible', 'close', 'far', 'distance', 'distance', 'distance', 'distance', 'distance'];
    このメソッドは、Dom を作成します。
    this.start();//開始}
// 関数の開始 Index.prototype.start = function () {
    var self = this;
    setInterval(関数() {
        var c = self.getClock();
        // コンソールログ(c);
        self.column.forEach(関数 (ele, インデックス) {
            var n = + c[インデックス];
            var offset = n * 86; //移動距離 console.log(offset);
            $(ele).css({
                '変換': 'translateY(calc(50vh - ' + offset + 'px - 73px))'
                // 移動を設定する });
            Array.from(ele.children).forEach(function (ele2, index2) {
                var className = self.getClass(n, index2);
                // クラス名を設定する関数を呼び出します $(ele2).attr('class', className);
            })
        })
    }, 500);
};
// 距離時間が異なる要素に異なるクラス名を設定する Index.prototype.getClass = function (n, i) {
    var className = this.classList.find(function (ele, index) {
        i - インデックス === n || i + インデックス === n を返します。
    })
    クラス名を返します || "";
}
 
// 時間を取得してフォーマットします。文字列 21:06:09 ==> 210609
Index.prototype.getClock = 関数 () {
    var d = 新しい日付();
    // ここでは三項演算子を使用しています。use が true の場合は値を取得します。false の場合は、12 の余りを 12 時間制に変換します。 return [this.use ? d.getHours() : d.getHours() % 12 || 12, d.getMinutes(), d.getSeconds()].reduce(function (p, n) {
        p + ('0' + n).slice(-2) を返します。
        // ここでは 1 桁に 0 を加算します。たとえば、1 に 0 を加算すると 01 になり、12 に 0 を加算すると 012 になりますが、値の最後の 2 桁を取ると 12 になります。
    }, '')
};
// すべての HTML 要素を HTML ファイルに書き込むのは冗長すぎるため、for ループを使用して追加します。Index.prototype.creatDom = function () {
    (var i = 0; i < 6; i++) の場合 {
        var oDiv = '<div>' + i + '</div>';
        $(".6").append(oDiv);
    }
    (var i = 0; i < 10; i++) の場合 {
        var iDiv = '<div>' + i + '</div>';
        $(".ten").append(iDiv);
    }
};
 
// 2 番目のパラメータ。true の場合は 24 時間制、false の場合は 12 時間制です。new Index($('.column'), true);