JavaScript zum Erzielen des JD.com-Blitzverkaufseffekts

* {
            Rand: 0;
            Polsterung: 0;
        }
        
        .Kasten {
            Breite: 190px;
            Höhe: 270px;
            Farbe: #fff;
            Textausrichtung: zentriert;
            Rand: 100px automatisch;
            Hintergrundfarbe: #d00;
            Polsterung oben: 40px;
            Box-Größe: Rahmenbox;
        }
        
        .box>h3 {
            Schriftgröße: 26px;
        }
        
        .box>p:n-ter-Typ(1) {
            Farbe: rgba(255, 255, 255, .5);
            Rand oben: 5px;
        }
        
        .box>i {
            Anzeige: Inline-Block;
            Rand oben: 5px;
            Rand unten: 5px;
            Schriftgröße: 40px;
        }
        
        .box>.zeit {
            Anzeige: Flex;
            Inhalt ausrichten: zentriert;
            Rand oben: 10px;
        }
        
        .Zeit>div {
            Breite: 40px;
            Höhe: 40px;
            Hintergrund: #333;
            Zeilenhöhe: 40px;
            Textausrichtung: zentriert;
            Schriftstärke: 700;
            Position: relativ;
        }
        
        .time>div::vor {
            Inhalt: "";
            Anzeige: Block;
            Breite: 100 %;
            Höhe: 2px;
            Hintergrund: #d00;
            Position: absolut;
            links: 0;
            oben: 50 %;
            transformieren: verschiebeY(-50%);
        }
        
        .Zeit>.Minute {
            Rand: 0 10px;
}

<div Klasse="Box">
        <h3>Jingdong Blitzverkauf</h3>
        <p>Blitzangebote</p>
        <i class="iconfont icon-lightningbshandian"></i>
        <p>Es sind noch 10 Minuten in diesem Spiel</p>
        <div Klasse="Zeit">
            <div class="Stunde">00</div>
            <div class="Minute">00</div>
            <div Klasse="Zweite">00</div>
        </div>
 </div> 

//1. Holen Sie sich das zu bearbeitende Element const oHour = document.querySelector(".hour");
const oMinute = document.querySelector(".minute");
const oSecond = document.querySelector(".second");
 
//2. Verarbeitungszeitdifferenz const remDate = new Date("2021-10-28 23:59:59");
 
        setzeZeit(remDate);
 
        //Starte den Timer setInterval(function() {
            setzeZeit(remDate);
        }, 1000);
 
        //Damit Benutzer den Effekt gleich beim Betreten sehen können, statt erst drei 00er
        // Wir können es kapseln function setTime(remDate) {
            const obj = getDifferTime(remDate);
            // konsole.log(obj);
 
            //3. Setze die Differenz zum Element oHour.innerText = obj.hour;
            oMinute.innerText = obj.minute;
            oSecond.innerText = obj.Sekunde;
        }
 
        Funktion getDifferTime(remDate, curDate = neues Datum()) {
            //1. Ermitteln Sie die Differenz zwischen zwei Zeiten (Millisekunden).
            const differentTime = remDate - aktuellesDatum;
 
            //2. Ermitteln Sie die Differenz zwischen zwei Zeiten (Sekunden)
            const differentSecond = differentTime / 1000;
 
            //3. Verwenden Sie die Gesamtzahl der Sekunden der Differenz / die Anzahl der Sekunden jedes Tages = die Anzahl der Tage der Differenz let day = Math.floor(differSecond / (60 * 60 * 24));
            Tag = Tag >= 10? Tag: "0" + Tag;
 
            //4. Nutze die Gesamtzahl der Sekunden/Stunden % 24
            lass Stunde = Math.floor(differSecond / (60 * 60) % 24);
            Stunde = Stunde >= 10? Stunde: "0" + Stunde;
 
            //5. Verwenden Sie die Gesamtzahl der Sekunden/Minuten der Differenz % 60
            lass minute = Math.floor(differSecond / 60 % 60);
            Minute = Minute >= 10? Minute: "0" + Minute;
 
            // 6. Verwenden Sie die Gesamtzahl der Sekunden der Differenz % Sekunden let second = Math.floor(differSecond % 60);
            Sekunde = Sekunde >= 10? Sekunde: "0" + Sekunde;
 
            zurückkehren {
                Tag: Tag,
                Stunde: Stunde,
                Minute: Minute,
                zweite: zweite,
            }
        }