Wie erstellt man: "Demnächst verfügbar"-Seite

Wie erstellt man eine "Demnächst verfügbar"-Seite

Erster Schritt - HTML hinzufügen:

In unserem Beispiel verwenden wir ein Hintergrundbild, das die gesamte Seite abdeckt, und platzieren einige Texte im Bild, damit der Benutzer weiß, was passiert.

Dieses Beispiel zeigt, wie man eine "Demnächst verfügbar"-Seite mit HTML und CSS erstellt. Bitte sehen Sie sich das nächste Beispiel an, um zu erfahren, wie man mit JavaScript einen "Rückgabecountdown-Timer" hinzufügt.

<div class="bgimg">
  <div class="topleft">
    <p>Logo</p>
  </div>
  <div class="middle">
    <h1>Demnächst verfügbar</h1>
    <hr>
    <p id="demo">35 Tage</p>
  </div>
  <div class="bottomleft">
    <p>Einige Texte</p>
  </div>
</div>

Zweiter Schritt - CSS hinzufügen:

/* Die Höhe von body und html auf 100% setzen, um sicherzustellen, dass das Hintergrundbild die gesamte Seite abdeckt: */
body, html {
  height: 100%
}
.bgimg {
  /* Hintergrundbild */
  background-image: url('/w3images/forestbridge.jpg');
  /* Vollbild */
  height: 100%;
  /* Das Hintergrundbild zentrieren */
  background-position: center;
  /* Das Bild vergrößern */
  background-size: cover;
  /* position: relative hinzufügen, um absolute Positionselemente im Bildinneren zu aktivieren (Text platzieren) */
  position: relative;
  /* Für alle Elemente im .bgimg-Container die weiße Textfarbe hinzufügen */
  color: white;
  /* Schriftart hinzufügen */
  font-family: "Courier New", Courier, monospace;
  /* Die Zeichengröße auf 25 Pixel setzen */
  font-size: 25px;
}
/* Den Text im oberen linken Ecke positionieren */
.topleft {
  position: absolute;
  top: 0;
  left: 16px;
}
/* Den Text im unteren linken Ecke positionieren */
.bottomleft {
  position: absolute;
  bottom: 0;
  left: 16px;
}
/* In der Mitte den Text positionieren */
.middle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
/* Setzen Sie das Stil des <hr>-Elements */
hr {
  margin: auto;
  width: 40%;
}

Selbst ausprobieren

Dritter Schritt - Fügen Sie JavaScript hinzu:

Fügen Sie JavaScript hinzu, um einen Countdown-Timer zu erstellen:

// Setzen Sie das Datum, für das wir den Countdown durchführen
var countDownDate = new Date("Jan 5, 2024 15:37:25").getTime();
// Aktualisieren Sie den Countdown alle 1 Sekunde
var x = setInterval(function() {
  // Erhalten Sie das aktuelle Datum und die Zeit
  var now = new Date().getTime();
  // Berechnen Sie den Abstand zwischen dem aktuellen Datum und dem Countdown-Datum
  var distance = countDownDate - now;
  // Berechnen Sie die Zeit für Tage, Stunden, Minuten und Sekunden
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);
  // Zeigen Sie das Ergebnis im Element mit id="demo" an
  document.getElementById("demo").innerHTML = days + "d " + hours + "h ";
  + minutes + "m " + seconds + "s ";
  // Wenn der Countdown abgelaufen ist, schreiben Sie einige Texte.
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "ABGELAUFEN";
  }

Selbst ausprobieren