Jak stworzyć: "Do siebie przeczeszcząc"

Jak stworzyć stronę "Do siebie przeczeszcząc"

Krok 1 - Dodaj HTML:

W naszym przykładzie użyjemy tła obrazu, które pokrywa całą stronę, i umieścimy na nim kilka tekstów, aby użytkownik wiedział, co się dzieje.

Ten przykład pokazuje, jak używać HTML i CSS do tworzenia strony "Do siebie przeczeszcząc". Zobacz następny przykład, aby dowiedzieć się, jak dodać "odliczanie czasowe" za pomocą JavaScript.

<div class="bgimg">
  <div class="topleft">
    <p>Logo</p>
  </div>
  <div class="middle">
    <h1>DO SOBIEJ PRZECZESZCZĘ</h1>
    <hr>
    <p id="demo">35 dni</p>
  </div>
  <div class="bottomleft">
    <p>Niektóry tekst</p>
  </div>
</div>

Krok 2 - Dodaj CSS:

/* Ustawienie wysokości body i html na 100%, aby obraz tła pokrywał całą stronę: */
body, html {
  height: 100%
}
.bgimg {
  /* Obraz tła */
  background-image: url('/w3images/forestbridge.jpg');
  /* Pełny ekran */
  height: 100%;
  /* Centrowanie obrazu tła */
  background-position: center;
  /* Zwiększenie obrazu */
  background-size: cover;
  /* Dodanie position: relative, aby włączyć absolutne pozycjonowanie elementów wewnętrznych obrazu (umieszczenie tekstu) */
  position: relative;
  /* Dodanie białego koloru tekstu dla wszystkich elementów w kontenerze .bgimg */
  color: white;
  /* Dodanie czcionki */
  font-family: "Courier New", Courier, monospace;
  /* Ustawienie rozmiaru czcionki na 25 pikseli */
  font-size: 25px;
}
/* W położeniu tekstu w lewym górnym rogu */
.topleft {
  position: absolute;
  top: 0;
  left: 16px;
}
/* W położeniu tekstu w lewym dolnym rogu */
.bottomleft {
  position: absolute;
  bottom: 0;
  left: 16px;
}
/* W położeniu tekstu w środku */
.middle {}}
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
/* Ustaw styl elementu <hr> */
hr {
  margin: auto;
  szerokość: 40%;
}

Spróbuj sam

Krok 3 - Dodaj JavaScript:

Dodaj JavaScript, aby utworzyć licznik:

// Ustaw datę, do której liczymy
var countDownDate = new Date("Sty 5, 2024 15:37:25").getTime();
// Aktualizuj licznik co 1 sekundę
var x = setInterval(function() {
  // Pobierz dzisiejszą datę i czas
  var teraz = new Date().getTime();
  // Obliczanie odległości między aktualnym czasem a datą licznika
  var odległość = countDownDate - teraz;
  // Obliczanie liczby dni, godzin, minut i sekund
  var dni = Math.floor(odległość / (1000 * 60 * 60 * 24));
  var godziny = Math.floor((odległość % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minuty = Math.floor((odległość % (1000 * 60 * 60)) / (1000 * 60));
  var sekundy = Math.floor((odległość % (1000 * 60)) / 1000);
  // Wyświetl wynik w elemencie o id="demo"
  document.getElementById("demo").innerHTML = dni + "d " + godziny + "h "
  + minuty + "m " + sekundy + "s ";
  // Jeśli licznik się skończy, napisz kilka tekstów.
  if (odległość < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "WYGAŚNIŁO";
  }

Spróbuj sam