Maison >interface Web >js tutoriel >Créer un site Web de compte à rebours
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.
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.
Voici un aperçu rapide de la structure du projet :
Countdown-Timer/ ├── index.html ├── style.css └── script.js
Pour démarrer le projet, suivez ces étapes :
Cloner le dépôt :
git clone https://github.com/abhishekgurjar-in/Countdown-Timer.git
Ouvrez le répertoire du projet :
cd Countdown-Timer
Exécuter le projet :
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 :
8b05045a5be5764f313ed5b9168a17e6 49099650ebdc5f3125501fa170048923 93f0f5c25f18dab9d176bd4f6de5d30e 7c8d9f814bcad6a1d7abe4eda5f773e5 26faf3d1af674280d03ba217d87e9421 b2386ffb911b14667cb8f0f91ea547a7Countdown Timer6e916e0f7d1e588d4f442bf645aedb2f d8b7823904473d155afe66ded7e78f93 9c3bca370b5104690d9ef395f2c5f8d1 6c04bd5ca3fcae76e30b72ad730ca86d 473a967da286a3c736825b4619e7dc30 af42a90d66eb0ab7ffd90605d49bfcdb 924ff17625d603f964501dd897c96cc6 4a249f0d628e2318394fd9b75b4636b1Countdown Timer473f0a7621bec819994bb5020d29372a 16b28748ea4df4d9c2150843fecfba68 9e80a1cbb6fa0609753359a9577296d4We are coming soon16b28748ea4df4d9c2150843fecfba68 40cf589a8d9222aac570db87a343584a4 July 2025 10:00 PM16b28748ea4df4d9c2150843fecfba68 e70522973cfd5bc8e7f5270545f1ac4d dc6dce4a544fdca2df29d5ac0ea9906b 08aecd3082d1f5b25e4b501500d294fc df250b2156c434f3390392d09b1c9563 2e1cf0710519d5598b1f0f14c36ba674Days8c1ecd4bb896b2264e0711597d40766c 16b28748ea4df4d9c2150843fecfba68 dc6dce4a544fdca2df29d5ac0ea9906b 08aecd3082d1f5b25e4b501500d294fc df250b2156c434f3390392d09b1c9563 2e1cf0710519d5598b1f0f14c36ba674Hours8c1ecd4bb896b2264e0711597d40766c 16b28748ea4df4d9c2150843fecfba68 dc6dce4a544fdca2df29d5ac0ea9906b 08aecd3082d1f5b25e4b501500d294fc df250b2156c434f3390392d09b1c9563 2e1cf0710519d5598b1f0f14c36ba674Minutes8c1ecd4bb896b2264e0711597d40766c 16b28748ea4df4d9c2150843fecfba68 dc6dce4a544fdca2df29d5ac0ea9906b 08aecd3082d1f5b25e4b501500d294fc df250b2156c434f3390392d09b1c9563 2e1cf0710519d5598b1f0f14c36ba674Seconds8c1ecd4bb896b2264e0711597d40766c 16b28748ea4df4d9c2150843fecfba68 16b28748ea4df4d9c2150843fecfba68 ffd6ba4147bda351239915f463e46e38 e388a4556c0f65e1904146cc1a846beeMade with ❤️ by Abhishek Gurjar94b3e26ee717c64999d7867364b1b4a3 16b28748ea4df4d9c2150843fecfba68 16b28748ea4df4d9c2150843fecfba68 16b28748ea4df4d9c2150843fecfba68 35c1efb1a96c7fc3ad8e56d875e8f4062cacc6d41bbb37262a98f745aa00fbf0 36cc49f0c466276486e50c850b7e4956 73a6ac4ed44ffec12cee46588e518a5e
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; }
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);
Vous pouvez consulter la démo en direct du compte à rebours ici.
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 !
Ce projet a été inspiré par le besoin d'un outil de compte à rebours simple et efficace pour divers événements.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!