Générateur de compte à rebours : code HTML et React gratuit, sans inscription | We.Inc
Créez un compte à rebours pour votre site web. Choisissez la date et le fuseau horaire, un style, puis copiez du HTML simple ou un composant React. Sans compte, sans widget de suivi, sans script externe.
Un compte à rebours sur un site compare une échéance fixe avec l'horloge du visiteur une fois par seconde et affiche les jours, heures, minutes et secondes restants. Indiquez ci-dessous votre date, votre heure et votre fuseau horaire, choisissez un style et copiez du HTML autonome ou un composant React. Le code s'exécute sur votre page, sans script tiers ni compte.
Deux types de compte à rebours
Type
Échéance
À utiliser pour
Date fixe
Le même instant pour tout le monde
Lancements, événements, soldes qui se terminent à une heure réelle
Par visiteur
Un nombre d'heures défini après la première visite de chaque visiteur
Offres de bienvenue qui expirent réellement pour cette personne
Choisissez une date et le fuseau horaire de l'échéance, l'un des trois styles et une couleur d'accent, puis voyez le résultat en direct ci-dessous. Vous obtenez un seul bloc HTML, CSS et JavaScript, ou un composant React avec des classes Tailwind.
Choisissez la date et l'heure de l'échéance, puis son fuseau horaire. Le code enregistre l'instant exact en UTC, pour que les visiteurs d'autres fuseaux voient le bon temps restant.
Ou passez à un compte à rebours par visiteur et indiquez combien d'heures chaque visiteur obtient.
Choisissez un style et une couleur d'accent, puis modifiez le titre et le message affiché quand le temps est écoulé.
Copiez l'intégration HTML ou le composant React et collez-le là où le compte à rebours doit apparaître.
N'affichez un compte à rebours que pour une échéance réelle. Les minuteurs qui se réinitialisent ou ne finissent jamais trompent les visiteurs, et la Federal Trade Commission américaine classe les faux comptes à rebours parmi les pratiques de design trompeuses.
Dites dans le message final ce qui se passe à zéro, par exemple que les soldes sont terminés ou que l'événement a commencé, avec un lien vers l'étape suivante.
Le minuteur utilise l'horloge de l'appareil du visiteur. Si elle est fausse, le compte à rebours l'est aussi : ne vous en servez donc jamais comme seul contrôle d'une vraie date limite, et appliquez les échéances aussi sur votre serveur.
Épargnez aux lecteurs d'écran les mises à jour à chaque seconde. Le code marque le minuteur avec role timer et aria-live off pour qu'il n'annonce pas chaque tic.
Questions fréquentes
Comment ajouter un compte à rebours à mon site web ?
Copiez l'intégration HTML et collez-la dans votre page à l'endroit voulu. La plupart des créateurs de sites proposent un bloc HTML ou d'intégration pour cela. Si votre site est construit avec React, copiez plutôt le composant et affichez-le comme n'importe quel autre composant.
Le minuteur sera-t-il juste pour les visiteurs d'autres fuseaux horaires ?
Oui. L'outil convertit votre date et votre fuseau horaire en un instant exact en UTC et écrit ce nombre dans le code. Le navigateur de chaque visiteur compte à rebours jusqu'au même instant, quelle que soit son heure locale.
À quoi sert l'option par visiteur ?
Elle démarre le compte à rebours de chaque visiteur à sa première visite et enregistre cet instant dans son navigateur, pour qu'une actualisation ne le relance pas. Effacer les données du site ou changer d'appareil en démarre un nouveau : ne l'utilisez donc que pour des offres que vous acceptez d'honorer dans ce cas.
Puis-je mettre ce compte à rebours dans un e-mail ?
Non. Les clients de messagerie n'exécutent pas JavaScript. Les comptes à rebours dans les e-mails sont des images animées générées par un serveur au moment où l'e-mail est ouvert, ce qu'une page statique ne peut pas fournir.
Pourquoi le code enregistre l'UTC
Une date comme le 1 décembre à 9:00 correspond à des instants différents à Toronto et à Karachi. Enregistrer l'échéance sous forme d'horodatage UTC lève cette ambiguïté et gère aussi les changements d'heure, puisque la conversion applique les règles du fuseau choisi pour cette date précise.
Le script soustrait ensuite l'heure actuelle de l'échéance à chaque tic et répartit la différence en jours, heures, minutes et secondes.
Un minuteur précis et léger
Les navigateurs ralentissent les minuteurs dans les onglets en arrière-plan, si bien qu'un compte à rebours qui retire simplement une seconde à chaque tic dérive. Ce code recalcule à partir de l'horloge à chaque fois et programme la mise à jour suivante au début de la seconde suivante, il reste donc juste quand l'onglet redevient actif.
Il n'y a ni bibliothèque ni requête externe, ce qui garde la page rapide et évite d'envoyer les données des visiteurs à un fournisseur de widget.