"compte à rebours au 1er janvier 2025"
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>
compteur
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
Jan 1 2025 00:00:00
data-*
HTML:
<p compteur data-fast="true">Jan 1 2025 00:00:00</p> ajoute les millisecondes
Demo:
Jan 1 2025 00:00:00
$.fn.compteur
HTML:
<p class="compteur">Jan 1 2025 00:00:00</p>
Javascript:
$(".compteur").compteur();
Demo:
Jan 1 2025 00:00:00
HTML:
<p id="compteur-add-options"></p>
Javascript:
$("#compteur-add-options").compteur({ date: new Date(2025, 1, 1) });
Demo:
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"
.
Nom | Type | Défaut | Description |
---|---|---|---|
autoStart | boolean | true | Démarre automatiquement le compteur une fois initialisé. . |
date | object / number / string | null | Date cible, objet de date d'autorisation, avec (millisecondes). |
fast | boolean | false | Réglez-le sur \'true'\ pour mettre à jour le numéro de date toutes les dixièmes de seconde . |
end | function | function() {} | La fonction sera exécutée à la fin du compteur. |
text | string | "%s jours, %s heures, %s minutes, %s secondes" | Juste un modèle de texte, vous pouvez le personnaliser. Exemple , "%s J / %s H / %s M / %s S". |
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:
Jan 1 2025 00:00:00
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:
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:
Jan 1 2025 00:00:00
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:
HTML:
<p compteur data-date="Jan 1 2025" data-text="到2025年1月1日倒计时 : %s 天 %s 时 %s 分 %s 秒"></p>
Demo en Chinois:
HTML:
<p compteur data-date="Jan 1 2025" data-text="2025年1月1日までのカウントダウン : %s 日 %s 時間 %s 分 %s 秒"></p>
Demo en Japonais:
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: