Sådan oprettes: "Kommer snart"-side

Sådan oprettes en "Kommer snart"-side

Første trin - Tilføj HTML:

I vores eksempel bruger vi et baggrundsbillede, der dækker hele siden, og placere nogle tekst i billedet for at informere brugeren om, hvad der sker.

Dette eksempel viser, hvordan man bruger HTML og CSS til at skabe en "Kommer snart"-side. Se næste eksempel for at finde ud af, hvordan man bruger JavaScript til at tilføje en "tæll ned"-tidsfunktionalitet.

<div class="bgimg">
  <div class="topleft">
    <p>Logo</p>
  </div>
  <div class="middle">
    <h1>KOMMER SNART</h1>
    <hr>
    <p id="demo">35 dage</p>
  </div>
  <div class="bottomleft">
    <p>nogle tekst</p>
  </div>
</div>

Andet trin - Tilføj CSS:

/* Sæt højden af body og html til 100%, så baggrundsbilledet dækker hele siden */
body, html {
  height: 100%
}
.bgimg {
  /* Baggrundsbillede */
  background-image: url('/w3images/forestbridge.jpg');
  /* Fullskærm */
  height: 100%;
  /* Centrer baggrundsbilledet */
  background-position: center;
  /* Forstør billedet */
  background-size: cover;
  /* Tilføj position: relative for at aktivere absolut定位 inden for billedet (placering af tekst) */
  position: relative;
  /* Tilføj hvid tekstfarve til alle elementer i .bgimg containeren */
  color: white;
  /* Tilføj skrift */
  font-family: "Courier New", Courier, monospace;
  /* Sæt skriftstørrelsen til 25 pixels */
  font-size: 25px;
}
/* Placer tekst i øvre venstre hjørne */
.topleft {
  position: absolute;
  top: 0;
  left: 16px;
}
/* Placer tekst i nederste venstre hjørne */
.bottomleft {
  position: absolute;
  bottom: 0;
  left: 16px;
}
/* Placer tekst i midten */
.middle {}}
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
/* Indstil stilen for <hr> elementet */
hr {
  margin: auto;
  width: 40%;
}

Prøv det selv

Trin 3 - Tilføj JavaScript:

Tilføj JavaScript for at oprette en tæller:

// Sæt datoen for tælleren
var countDownDate = new Date("Jan 5, 2024 15:37:25").getTime();
// Opdater tælleren hvert sekund
var x = setInterval(function() {
  // Få dagens dato og klokkeslæt
  var now = new Date().getTime();
  // Beregn afstanden mellem nu og datoen for tælleren
  var distance = countDownDate - now;
  // Beregn antal dage, timer, minutter og sekunder
  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);
  // Vis resultaterne i elementet med id="demo"
  document.getElementById("demo").innerHTML = days + "d " + hours + "h "
  + minutes + "m " + seconds + "s ";
  // Hvis tælleren er slut, skriv noget tekst.
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "Udløbet";
  }

Prøv det selv