Πώς να δημιουργήσετε: "Ερχόμενα Σoon" σελίδα

Πώς να δημιουργήσετε μια σελίδα "Ερχόμενα Σoon"

Βήμα 1 - Προσθήκη HTML:

Στο παράδειγμα μας, θα χρησιμοποιήσουμε μια εικόνα φόντου που καλύπτει ολόκληρη τη σελίδα και θα τοποθετήσουμε μερικό κείμενο μέσα στην εικόνα, ώστε ο χρήστης να γνωρίζει τι συμβαίνει.

Αυτό το παράδειγμα δείχνει πώς να χρησιμοποιήσετε το HTML και το CSS για να δημιουργήσετε μια σελίδα "Ερχόμενα Σoon". Εξετάστε τον επόμενο παράδειγμα για να μάθετε πώς να προσθέσετε ένα χρονομετρητή με JavaScript.

<div class="bgimg">
  <div class="topleft">
    <p>Λογότυπο</p>
  </div>
  <div class="middle">
    <h1>Ερχόμενα Σoon</h1>
    <hr>
    <p id="demo">35 μέρες</p>
  </div>
  <div class="bottomleft">
    <p>Κάποιο κείμενο</p>
  </div>
</div>

Βήμα 2 - Προσθήκη CSS:

/* ρύθμιση της ύψους του body και του html σε 100% για να καλύπτει την ολόκληρη την εικόνα φόντου της σελίδας: */
body, html {
  height: 100%
}
.bgimg {
  /* εικόνα φόντου */
  background-image: url('/w3images/forestbridge.jpg');
  /* ολοένα και πιο μεγάλο */
  height: 100%;
  /* κεντρώση της εικόνας του φόντου */
  background-position: center;
  /* μεγέθυνση εικόνας */
  background-size: cover;
  /* προσθήκη position: relative για να ενεργοποιήσει τα στοιχεία της εικόνας που τοποθετούνται απόλυτα μέσα στην εικόνα (τοποθέτηση κειμένου) */
  position: relative;
  /* προσθήκη λευκής χρώματος κειμένου για όλους τους στοιχεία του .bgimg κουτίου */
  color: white;
  /* προσθήκη γραμματοσειράς */
  font-family: "Courier New", Courier, monospace;
  /* ρύθμιση μεγέθους γραμματοσειράς σε 25 εικονοστοιχεία */
  font-size: 25px;
}
/* στο πάνω αριστερό γωνία της τοποθέτησης κειμένου */
.topleft {
  position: absolute;
  top: 0;
  left: 16px;
}
/* στο κάτω αριστερό γωνία της τοποθέτησης κειμένου */
.bottomleft {
  position: absolute;
  bottom: 0;
  left: 16px;
}
/*  στο κέντρο της τοποθέτησης κειμένου */
.middle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
/* Ορισμός του στυλ του στοιχείου <hr> */
hr {
  margin: auto;
  width: 40%;
}

Δοκιμάστε το προσωπικά

Τρίτο βήμα - Προσθέστε JavaScript:

Προσθέστε JavaScript για να δημιουργήσετε έναν μετρητή countdown:

// Ορισμός της ημερομηνίας που υπολογίζουμε τον λογαριασμό
var countDownDate = new Date("Jan 5, 2024 15:37:25").getTime();
// Ενημέρωση του λογαριασμού κάθε 1 δευτερόλεπτο
var x = setInterval(function() {
  // Λήψη της σημερινής ημερομηνίας και ώρας
  var now = new Date().getTime();
  // Υπολογισμός της απόστασης μεταξύ της τρέχουσας ημερομηνίας και της ημερομηνίας λήξης
  var distance = countDownDate - now;
  // Υπολογισμός ημερών, ωρών, λεπτών και δευτερολέπτων για τον υπολογισμό του χρόνου
  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);
  // Εμφανίστε τα αποτελέσματα στο στοιχείο με id="demo"
  document.getElementById("demo").innerHTML = days + "d " + hours + "h ";
  + minutes + "m " + seconds + "s ";
  // Αν ο λογαριασμός έχει τελειώσει, γράψτε μερικούς κειμενος.
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "Λήξη";
  }
}, 1000);

Δοκιμάστε το προσωπικά