Compte à rebours personnalisé
Un compte à rebours dont tu dessines chaque bloc : jours, heures, minutes et secondes vivent dans tes propres éléments texte.
/ ÉTAPE 01
Copie-colle ce script dans le <body> de ta page
Le JavaScript ci-dessous fait fonctionner ton compte à rebours personnalisé. Tu peux modifier la date comme bon te semble.
<script>
// MODIFIEZ LA DATE DE FIN ICI (format ISO 8601)
const endDate = new Date('2025-12-31T23:59:59');
function updateTimer() {
const now = new Date();
const diff = endDate - now;
const values = {
days: 0,
hours: 0,
minutes: 0,
seconds: 0
};
if (diff > 0) {
values.days = Math.floor(diff / (1000 * 60 * 60 * 24));
values.hours = Math.floor((diff / (1000 * 60 * 60)) % 24);
values.minutes = Math.floor((diff / (1000 * 60)) % 60);
values.seconds = Math.floor((diff / 1000) % 60);
}
document.querySelectorAll('[data-timer]').forEach(el => {
const unit = el.getAttribute('data-timer');
if (unit in values) {
el.textContent = String(values[unit]).padStart(2, '0');
}
});
// Arrêter si terminé
if (diff <= 0) clearInterval(intervalId);
}
// Lancement du timer
updateTimer();
const intervalId = setInterval(updateTimer, 1000);
</script>/ ÉTAPE 02
Ajoute les attributs à tes éléments "Text"
Chaque bloc du compte à rebours porte l'attribut "data-timer" avec l'unité qu'il affiche : days, hours, minutes ou seconds.
/ OÙ LE COLLER
Dans
Webflow, Paramètres › Custom code
CUSTOM CODE
PARAMÈTRES DU PROJET
Head code
Footer code
Les codes personnalisés ne s'appliquent qu'après publication.
Footer code, jamais Head
Le script doit s'exécuter après le contenu de la page. Dans le Head, il ne trouverait rien à animer.
Une seule fois pour tout le site
Il se pose au niveau du projet, pas page par page. Les blocs le trouvent tout seuls.
Publier pour activer
Tant que le site n'est pas publié, le code personnalisé ne tourne pas, même en aperçu.
/ LES OPTIONS
Tout se pilote par classe
et par attribut.
ATTRIBUT
TYPE
RÔLE
data-timer
days · hours · minutes · seconds
L'unité affichée par l'élément texte qui porte l'attribut.
endDate
réglage
La date de fin, en haut du script, au format ISO 8601.
/ DANS LA MÊME FAMILLE
Les autres blocs
de date et d'heure.
/ PLUS DE SCRIPTS
Continue à équiper
tes projets.
SCRIPTJAVASCRIPTCompte à rebours classiqueLa version standard, posée en quelques minutes sur ta page.GRATUIT · 2,0 KO · 2 ÉTAPES
SCRIPTJAVASCRIPTBouton copier-collerUn bouton qui copie le texte de ton choix, avec son état de confirmation.GRATUIT · 0,8 KO · 3 ÉTAPES
SCRIPTJAVASCRIPTAnnée de copyright automatiqueNe touche plus jamais à la date affichée dans ton footer.GRATUIT · 0,2 KO · 2 ÉTAPES











