Pour commencer

Installation

Fichiers à ajouter:

<script src="http://radios.6te.net/compteur/js/jquery-1.12.1.min.js"></script><!-- jQuery requis -->
<script src="http://radios.6te.net/compteur/js/compteur.min.js"></script>

A ajouter dans votre fichier html avant </head>

Utilisation

Initialiser avec l'attribut compteur

Mode Basic

HTML:

<p class="style1" compteur>Jan 1 2025 00:00:00</p> avec une feuille de styles

Demonstration: télécharger une demo du compte à rebours

Ajouter l'option data-*

HTML:

<p compteur data-fast="true">Jan 1 2025 00:00:00</p> ajoute les millisecondes

Demo:

Fonction $.fn.compteur

Basic

HTML:

<p class="compteur">Jan 1 2025 00:00:00</p>

Javascript:

$(".compteur").compteur();

Demo:

Ajouter des options

HTML:

<p id="compteur-add-options"></p>

Javascript:

$("#compteur-add-options").compteur({
  date: new Date(2025, 1, 1)
});

Demo:

Options

Configuration avec $("#target").compteur(options), ou configuration globale avec $.fn.compteur.setDefaults(options).

Les options peuvent être transmises via des attributs de données ou JavaScript. Pour les attributs de données, ajoutez le nom de l'option data-, comme dans data-fast="true".

Mise en service du compte à rebours

Méthode

• start - Démarre le compteur
• stop - Stoppe le comteur
• end - Arrête le compteur
• destroy - Remise à zéro du comteur

Usage

HTML:

<p id="compteur-methods">Jan 1 2025 00:00:00</p>
<button id="compteur-start">Démarrer</button>
<button id="compteur-stop">Stop</button>
<button id="compteur-end" class="btn btn-success">Fin</button>
<button id="compteur-destroy" class="btn btn-danger">Initialiser</button>

JavaScript:

var $compteurMethods = $("#compteur-methods");

$compteurMethods.compteur({
  autoStart: false
});

$("#compteur-start").click(function() {
  $compteurMethods.compteur("Démarrer");
});

$("#compteur-stop").click(function() {
  $compteurMethods.compteur("Stop");
});

$("#compteur-end").click(function() {
  $compteurMethods.compteur("Fin");
});

$("#compteur-destroy").click(function() {
  $compteurMethods.compteur("Initialiser");
});

Demo:

Configuration

Personnalisez le contenu, la mise en page, le style en ajoutant l'attribut data- * au compteur. Par example :

HTML:

<div class="compteur" compteur data-date="Jan 1 2025 00:00:00">
  <span data-heading>Compteur de la nouvelle année</span>
  <span data-days>0</span> jours
  <span data-hours>0</span> heures
  <span data-minutes>0</span> minutes
  <span data-seconds>0</span> secondes
</div>

Demo:

Plus de démos

Compte à rebours avec un texte

HTML:

<p compteur data-text="Le 1er janvier 2025 arrivera dans <strong>%s jours %s heures %s minutes et %s secondes</strong>">Dec 25 2021 00:00:00</p>

Demo:

I18n - en-US

HTML:

<p compteur data-date="Jan 1 2025" data-text="Countdown to 1 January 2025 ： %s days %s hours %s minutes %s seconds"></p>

Demo en Anglais:

I18n - zh-CN

HTML:

<p compteur data-date="Jan 1 2025" data-text="到2025年1月1日倒计时 ： %s 天 %s 时 %s 分 %s 秒"></p>

Demo en Chinois:

I18n - jp-JP

HTML:

<p compteur data-date="Jan 1 2025" data-text="2025年1月1日までのカウントダウン ： %s 日 %s 時間 %s 分 %s 秒"></p>

Demo en Japonais:

Compte à rebours avec la fonction fin

HTML:

<p id="compteur-option-end"></p>

JavaScript:

var $compteurOptionEnd = $("#compteur-option-end");

$compteurOptionEnd.compteur({
  date: (new Date()).getTime() + 60 * 1000, // 1 minute compte à rebours
  fast: true,
  end: function() {
    $compteurOptionEnd.text("fin du compteur!");
  }
});

Demo: