Créer un site Web de compte à rebours-js tutoriel-php.cn

Créer un site Web de compte à rebours

PHPz

Libérer： 2024-08-14 12:37:20

original

1060 Les gens l'ont consulté

Build a Countdown Timer Website

Introduction

Bonjour, amis développeurs ! Aujourd'hui, je suis ravi de partager un projet que j'ai récemment réalisé : un compte à rebours. Ce projet est un excellent moyen d'apprendre et de pratiquer JavaScript, notamment dans les domaines de la manipulation du temps et des mises à jour du DOM. Que vous cherchiez à créer un compte à rebours pour un événement, un lancement de produit ou simplement un minuteur amusant, ce projet est un début parfait.

Aperçu du projet

Le Compte à rebours permet aux utilisateurs de définir une date et une heure cibles, et il comptera en continu les jours, les heures, les minutes et les secondes jusqu'à ce que ce moment arrive. La minuterie se met à jour en temps réel, offrant un design visuellement attrayant et réactif. Ce projet est idéal pour les développeurs qui souhaitent améliorer leurs compétences en création d'applications Web dynamiques et interactives.

Caractéristiques

Compte à rebours en temps réel : la minuterie se met à jour toutes les secondes, affichant le temps restant jusqu'à la date spécifiée.
Conception réactive : la mise en page s'adapte parfaitement à différents appareils et tailles d'écran.
Date de fin personnalisable : La date et l'heure cibles peuvent être facilement modifiées, ce qui rend la minuterie polyvalente pour divers événements.

Technologies utilisées

HTML : utilisé pour structurer le contenu de la page Web.
CSS : appliqué pour styliser la page Web et assurer la réactivité.
JavaScript : Implémenté pour calculer le temps restant et mettre à jour le DOM en temps réel.

Structure du projet

Voici un aperçu rapide de la structure du projet :

Countdown-Timer/
├── index.html
├── style.css
└── script.js

Copier après la connexion

index.html : Contient la structure HTML de la page Web.
style.css : contient les styles CSS, y compris les règles de conception réactive.
script.js : Gère la logique du compte à rebours et les mises à jour du DOM à l'aide de JavaScript.

Installation

Pour démarrer le projet, suivez ces étapes :

Cloner le dépôt :

git clone https://github.com/abhishekgurjar-in/Countdown-Timer.git

Copier après la connexion

Ouvrez le répertoire du projet :
```
cd Countdown-Timer
```
Copier après la connexion
Exécuter le projet :
- Vous pouvez l'exécuter sur un serveur local ou simplement ouvrir le fichier index.html dans un navigateur Web.

Usage

Ouvrez le site Web dans un navigateur Web.
Regardez le compte à rebours jusqu'à la date de fin spécifiée.
Personnalisez la date de fin dans le fichier script.js en fonction de votre événement ou de vos besoins.

Explication du code

HTML

Le fichier index.html contient la structure de la page Web, y compris l'affichage du compte à rebours et un en-tête simple. Ci-dessous un extrait du code HTML :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Countdown Timer</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <div class="main">
      <div class="overlay">
        <div class="header">
          <h1>Countdown Timer</h1>
        </div>
        <div class="title">We are coming soon</div>
        <div class="title" id="end-date">4 July 2025 10:00 PM</div>
        <div class="col">
          <div>
            <input type="text" readonly value="0" />
            <br />
            <label>Days</label>
          </div>
          <div>
            <input type="text" readonly value="0" />
            <br />
            <label>Hours</label>
          </div>
          <div>
            <input type="text" readonly value="0" />
            <br />
            <label>Minutes</label>
          </div>
          <div>
            <input type="text" readonly value="0" />
            <br />
            <label>Seconds</label>
          </div>
        </div>
        <div class="footer">
          <p>Made with ❤️ by Abhishek Gurjar</p>
        </div>
      </div>
    </div>
    <script src="./script.js"></script>
  </body>
</html>

Copier après la connexion

CSS

Le fichier style.css contient des styles qui garantissent que la page Web est visuellement attrayante et inclut une réactivité pour différentes tailles d'écran. Voici quelques styles clés :

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

.main {
  width: 100%;
  height: 100vh;
  background: url(./images/bg.jpg);
  background-size: cover;
}

.overlay {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: white;
  background-color: rgba(0, 0, 0, 0.7);
}

.title {
  color: white;
  text-align: center;
  font-size: 2.5rem;
  padding: 25px;
}

.col {
  margin-top: 10px;
  width: 1000px;
  color: white;
  justify-content: center;
  display: flex;
}

.col div {
  width: 250px;
  text-align: center;
}

input {
  background-color: rgba(255, 255, 255, 0.9);
  border-color: transparent;
  border-radius: 5px;
  height: 50px;
  text-align: center;
  font-size: 20px;
}

.header {
  margin: 40px;
  text-align: center;
}

.footer {
  margin: 300px;
  text-align: center;
}

Copier après la connexion

Javascript

Le fichier script.js gère la logique du compte à rebours, mettant à jour l'affichage toutes les secondes. Vous trouverez ci-dessous un extrait du code JavaScript :

const endDate = "4 July 2025 10:00 PM";

document.getElementById("end-date").innerText = endDate;
const input = document.querySelectorAll("input");

function countDown() {
  const end = new Date(endDate);
  const now = new Date();
  const diff = (end - now) / 1000;

  if (diff < 0) return;

  input[0].value = Math.floor(diff / 3600 / 24);
  input[1].value = Math.floor(diff / 3600) % 24;
  input[2].value = Math.floor(diff / 60) % 60;
  input[3].value = Math.floor(diff) % 60;
}

countDown();
setInterval(countDown, 1000);

Copier après la connexion

Démo en direct

Vous pouvez consulter la démo en direct du compte à rebours ici.

Conclusion

Construire ce compte à rebours a été une expérience d'apprentissage précieuse qui m'a permis d'explorer les capacités de JavaScript en matière de manipulation du temps et d'interaction DOM. J'espère que ce projet vous inspirera pour créer vos propres applications dynamiques et interactives. N'hésitez pas à explorer le code, à le personnaliser et à l'utiliser dans vos propres projets. Bon codage !