JavaScript zum Implementieren einer zeitlich begrenzten Flash-Sale-Funktion

In diesem Artikel wird der spezifische JavaScript-Code zur Implementierung der zeitlich begrenzten Flash-Sale-Funktion zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt

<!DOCTYPE html>
<html>
 <Kopf>
  <meta charset="utf-8">
  <Titel></Titel>
 </Kopf>
 <Text>
  <div Klasse="Box">
   <div id="d"></div> <!-- Verbleibende Tage -->
   <div id="h"></div> <!-- Verbleibende Stunden -->
   <div id="m"></div> <!-- Verbleibende Minuten -->
   <div id="s"></div> <!-- Verbleibende Sekunden -->
  </div>
  <Skript>
   //Endzeit des Flash-Sales festlegen var endTime = new Date('2021-10-22 18:51:59'), endSeconds = endTime.getTime();
   //Variablen zum Speichern der verbleibenden Zeit definieren var d = h = m = s = 0;
   //Stellen Sie den Timer ein, um den zeitlich begrenzten zweiten Kill-Effekt zu erzielen. var id = setInterval(seckill,1000);
   Funktion seckill(){
    var nowTime = new Date(); //Aktuelle Uhrzeit abrufen //Zeitunterschied in Sekunden abrufen var remainder = parseInt((endSeconds - nowTime.getTime())/1000);
     if(remaining>0){//Beurteilen, ob der Flash-Sale abgelaufen ist//Verbleibende Tage berechnen (durch 60*60*24 teilen und aufrunden, um die verbleibenden Tage zu erhalten)
      d = parseInt (restlich / 86400);
      // Berechnen Sie die verbleibenden Stunden (dividieren Sie durch 60*60, um in Stunden umzurechnen, modulo 24 Stunden, um die verbleibenden Stunden zu erhalten)
      h = parseInt((restlich / 3600) % 24);
      //Berechnen Sie die verbleibenden Minuten (dividieren Sie durch 60, um die Minuten zu erhalten, Modulo 60, um die verbleibenden Minuten zu erhalten)
      m=parseInt((restlich / 60) % 60);
      //Berechnen Sie die verbleibenden Sekunden (Modulo 60, um die verbleibenden Sekunden zu erhalten)
      s = parseInt (verbleibende % 60);
      //Verwenden Sie zwei Ziffern, um die verbleibenden Tage, Stunden, Minuten und Sekunden darzustellen d = d<10 ? '0' + d : d;
      h = h<10 ? '0' + h : h;
      m = m<10 ? '0' + m : m;
      s = s<10 ? '0' + s : s;
     }anders{
      clearInterval(id); //Zweiter Verkauf abgelaufen, Timer abbrechen d = h = m = s ='00';
     }
     //Zeige die verbleibenden Tage, Stunden, Minuten und Sekunden bis zur angegebenen Webseite an. document.getElementById('d').innerHTML = d + 'days';
     document.getElementById('h').innerHTML = h + 'Nicht';
     document.getElementById('m').innerHTML = m + 'Nein';
     document.getElementById('s').innerHTML = s + 'Sekunden';
   }
  </Skript>
 </body>
</html>

Ich möchte Ihnen ein einfaches Beispiel für einen zeitlich begrenzten Flash-Sale mit JS zeigen:

<!DOCTYPE html>
<html>
<head lang="de">
    <meta charset="UTF-8">
    <Titel></Titel>
    <Stil>
        .product{ Rahmen: 3px durchgehend orange; Anzeige: Inline-Block; linker Rand: 400px; Breite: 400px; }
        .red{ Farbe: rot; Schriftgröße: 25px; }
    </Stil>
</Kopf>
<Text>


<div Klasse="Produkt" Stil="Textausrichtung: Mitte;">
    <img src="jquery case-blinds/images/0.jpg" alt="" width="150"/>
    <p>Ein perfekter Mann</p>
    <span>Ursprünglicher Preis: <del>9,9 Milliarden</del></span>
    <br/>
    <span>Aktueller Preis: <span class="red">100 Yuan</span></span>
    <br/>
    <span>Der Verkauf endet in:</span><span id="time"></span>
</div>


<Skript>


    var stopTime = neues Datum (3000,11,14,0,0,0);
    var jetztZeit = neues Datum();
    var jianGe = (Stoppzeit - aktuelle Zeit)/1000;


    var Tag = Math.floor(jianGe/60/60/24);
    var Stunde = Math.floor(jianGe/60/60%24);
    var min = Math.floor(jianGe/60%60);
    var sec = Math.floor(jianGe%60);
    var showTime = Tag+'Tag'+Stunde+'Stunde'+Min+'Minute'+Sek+'Sekunde';
    document.getElementById('time').innerText = Zeit anzeigen;


    //Timer: wie oft eine Funktion ausgeführt wird //setInterval(func,ms)
    var Timer = Intervall festlegen(Funktion () {


        var jetztZeit = neues Datum();
        var jianGe = (Stoppzeit - aktuelle Zeit)/1000;


        var Tag = Math.floor(jianGe/60/60/24);
        var Stunde = Math.floor(jianGe/60/60%24);
        var min = Math.floor(jianGe/60%60);
        var sec = Math.floor(jianGe%60);


        var showTime = Tag+'Tag'+Stunde+'Stunde'+Min+'Minute'+Sek+'Sekunde';


        document.getElementById('time').innerText = Zeit anzeigen;


        wenn(Tag==0&&Stunde==0&&Min==0&&Sek==0){
            //Schalte den Timer aus clearInterval(timer);
        }


    },1000);

</Skript>

</body>
</html>

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:

JavaScript-Datenvisualisierung: ECharts-Kartenerstellung
Super detaillierte grundlegende JavaScript-Syntaxregeln
Detaillierte Erklärung der obligatorischen und impliziten Konvertierung von Typen in JavaScript
JavaScript implementiert das Ändern der Farbe einer Webseite über einen Schieberegler
Detaillierte Erklärung der Unterschiede zwischen var, let und const in JavaScript es6
Detaillierte Erklärung des this-Zeigeproblems in JavaScript
Fallstudie zu JavaScript-Funktionsaufrufen, Apply- und Bind-Methoden
Detaillierte Erklärung zur Verwendung des Arguments-Objekts in JavaScript
Beispiel für die JavaScript-Funktion „CollectGarbage“
Detaillierte Erklärung von BOM und DOM in JavaScript
Erläuterung der Anwendungsfälle von JavaScript setTimeout und setTimeinterval
JavaScript-Timer zur Realisierung einer zeitlich begrenzten Flash-Sale-Funktion
JavaScript-Objekte (Details)

<<: Detaillierte Erklärung zum Erstellen mehrerer Instanzen von MySQL 5.6 in einer CentOS7-Umgebung

>>: So verwenden Sie iostat zum Anzeigen der IO-Leistung von Linux-Festplatten