JD.com フラッシュセール効果を実現する JavaScript

この記事では、JD.comのフラッシュセール効果を実現するためのJavaScriptの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。

まず、HTML と CSS を使用してフレームワークを構築します。

* {
            マージン: 0;
            パディング: 0;
        }
        
        。箱 {
            幅: 190ピクセル;
            高さ: 270px;
            色: #fff;
            テキスト配置: 中央;
            マージン: 100px 自動;
            背景色: #d00;
            パディング上部: 40px;
            ボックスのサイズ: 境界線ボックス;
        }
        
        .box>h3 {
            フォントサイズ: 26px;
        }
        
        .box>p:n番目の型(1) {
            色: rgba(255, 255, 255, .5);
            上マージン: 5px;
        }
        
        .box>i {
            表示: インラインブロック;
            上マージン: 5px;
            下部マージン: 5px;
            フォントサイズ: 40px;
        }
        
        .box>.time {
            ディスプレイ: フレックス;
            コンテンツの中央揃え: 中央;
            上マージン: 10px;
        }
        
        .time>div {
            幅: 40px;
            高さ: 40px;
            背景: #333;
            行の高さ: 40px;
            テキスト配置: 中央;
            フォントの太さ: 700;
            位置: 相対的;
        }
        
        .time>div::before {
            コンテンツ： "";
            表示: ブロック;
            幅: 100%;
            高さ: 2px;
            背景: #d00;
            位置: 絶対;
            左: 0;
            上位: 50%;
            変換: translateY(-50%);
        }
        
        .時間>.分{
            マージン: 0 10px;
}

<div class="box">
        <h3>京東フラッシュセール</h3>
        <p>フラッシュセール</p>
        <i class="iconfont icon-lightningbshandian"></i>
        <p>この試合はまだ10分残っています</p>
        <div class="time">
            <div class="hour">00</div>
            <div class="minute">00</div>
            <div class="second">00</div>
        </div>
 </div>

ロジック部分を設計してみましょう。

関連要素を取得する

2 つの時刻の差を処理する関数を定義します。時間、分、秒が 10 未満の場合は、スペースを占有するために先頭に「0」を追加する必要があることに注意してください。最後に、オブジェクトの形式で返します。

動的な効果を実現するために、setInterval() を使用して、取得した時間、分、秒をすべて設定し、1 秒ごとに変更することができます。

ユーザーが開いた瞬間に効果を確認できるように、取得した時間、分、秒を関数にカプセル化し、setInterval()内外で直接関数を呼び出すことで、

//1. 操作対象となる要素を取得します。const oHour = document.querySelector(".hour");
const oMinute = document.querySelector(".minute");
const oSecond = document.querySelector(".second");
 
//2. 時間差の処理 const remDate = new Date("2021-10-28 23:59:59");
 
        日付をremDateに設定します。
 
        //タイマーを開始する setInterval(function() {
            日付をremDateに設定します。
        }, 1000);
 
        //ユーザーがアクセスするとすぐに効果を確認できるように、最初に3つの00を表示する代わりに
        // これをカプセル化できます function setTime(remDate) {
            定数obj = getDifferTime(remDate);
            // コンソールログ(obj);
 
            //3. 要素の差を設定します oHour.innerText = obj.hour;
            oMinute.innerText = obj.minute;
            oSecond.innerText = obj.second;
        }
 
        関数 getDifferTime(remDate, curDate = new Date()) {
            //1. 2つの時間の差を取得する（ミリ秒）
            const 異なる時間 = remDate - curDate;
 
            //2. 2つの時間（秒）の差を取得します
            定数differSecond = differTime / 1000;
 
            //3. 差の合計秒数 / 各日の秒数 = 差の日数を使用します。let day = Math.floor(differSecond / (60 * 60 * 24));
            day = day >= 10 ? day : "0" + day;
 
            //4. 秒数/時間の合計数を使用する % 24
            hour = Math.floor(differSecond / (60 * 60) % 24) とします。
            hour = hour >= 10 ? hour : "0" + hour;
 
            //5. 差の合計秒数/分数を使用する % 60
            分を Math.floor(differSecond / 60 % 60) とします。
            分 = 分 >= 10 ? 分 : "0" + 分;
 
            // 6. 差の合計秒数を使用します % seconds let second = Math.floor(differSecond % 60);
            second = second >= 10 ? second : "0" + second;
 
            戻る {
                日: 日、
                時間: 時間、
                分: 分、
                2番目: 2番目、
            }
        }