Compteur à pulsations en JavaScript

Réaliser un compteur est relativement facile. Si l'on veut aller plus loin et ajouter des effets graphiques, il convient de pouvoir accéder à chaque chiffre individuellement. Nous allons décrire un script générique qui permet de le faire, avec un effet graphique par défaut qui donne des pulsations aux chiffres et fait battre le compteur comme un coeur.

Il sera ensuite possible de changer l'effet visuel que l'on voudra appliquer à l'affichage des chiffres en changeant la fonction appelée par le script générique.

Sur les navigateurs anciens, l'effet visuel de pulsation ne fonctionne pas, un compteur simple s'affiche.

Démonstration

0000000


Le code HTML

<div id="counter">0000000</div>

Il est plutôt simple. Les boutons on et off font partie de la démonstration, ils peuvent être repris dans une application si on commande manuellement le démarrage du compteur, ou être remplacés par l'évènement qui le fait.

Dans tous les cas, on démarre le compteur avec la fonction setInterval:

<input type="button" 
       value="On" 
       onclick="counterID=setInterval(counterUpdate, 1000)" 
/>

Le code JavaScript générique

var counterMax = 9999999;   // total to reach
var counterStart = "0000000"; // same length than total
var counterValue = 0;  // current value

function digitUpdate(rank)
{
  var id = "digit" + new String(rank);
  var ret = false;
  digit = document.getElementById(id);
  var od = new Number(digit.innerHTML);
  var nd = od + 1;
  if(nd > 9)
  {
     ret = true;
    nd = 0;
  }
  counterEffect(id, nd);
  return ret;
}

function buildDisplay(rank)
{
  var id = "digit" + new String(rank);
  var digit = counterStart + new String(counterValue);
  digit = digit.charAt(digit.length - rank); 
  var d = "<div id=\"" + id + "\">" + digit + "</div>";  // ou span
  return d;
}

function counterUpdate()
{
  counterValue += 1;
  var size = counterStart.length;  
  var flag = digitUpdate(1); 	
  for(i = 2; i <= size; i++)
  {
    if(flag)
      flag = digitUpdate(i);
  }
}

function counterInit()
{
  counterValue = 0;
  var size = counterStart.length;  
  var theString = "";
  for(i = 1; i <= size; i++)
  {
   theString = buildDisplay(i) + theString;
  }
  var counter = document.getElementById("counter");
  counter.innerHTML = theString;
}

window.onload=counterInit;

La fonction counterInit qui démarre automatiquement au chargement de la page crée un layer avec un ID unique pour chaque chiffre. Pour cela elle appelle la fonction buildDisplay.
counterUpdate fait évoluer le nombre affiché par le compteur. Elle appelle digitUpdate avec pour argument le numéro de chaque chiffre.
digitUpdate appelle la fonction counterEffect avec pour argument l'ID de chaque digit et le nouveau chiffre à afficher.
C'est cette fonction que vous pouvez éventuellement modifier pour installer un effet visuel différent.

Le code de l'effet de pulsation

function counterGradient(id, level)
{
  var digit = document.getElementById(id);
  digit.style.opacity = level;
  digit.style.MozOpacity = level;
  digit.style.KhtmlOpacity = level;
  digit.style.filter = "alpha(opacity=" + level * 100 + ")";
  return;
}

function counterFadeIn(id) 
{
  var level = 0;
  while(level <= 1)
  {
    setTimeout( "counterGradient('" + id + "'," + level + ")", (level*1000)+10);
    level += 0.01;
  }
}

function counterFadeOut(id) 
{
  var level = 1;
  while(level >= 0)
  {
    setTimeout("counterGradient('" + id + "'," + level + ")", (level*1000)+10);
    level -= 0.01;
  }
}

function counterEffect(id, nd)
{
  counterFadeOut(id);
  digit.innerHTML = nd;
  counterFadeIn(id);	
}

Ce code créé un effet de pulsation en faisant disparaitre progressivement le chiffre actuel et en faisant apparaitre progressivement aussi le nouveau chiffre, cela en une seconde dans notre démo (le timing peut changer dans une autre application).

Le code CSS

Il donne son apparence au compteur en général et notamment la taille des chiffres. Cela peut être modifié selon l'application. 

#counter
{
  background:black;
  color:#00CC00;
  font-family:"Courier New", Courier, monospace;
  font-size:32px;
  line-height:38px;
  width:134px;
  padding:0px;
  border:3px double gray;
  -moz-border-radius:3px;
  border-radius:3px;
  box-shadow:2px 2px 4px #888888; 
  -moz-box-shadow:2px 2px 4px #888888; 
  -webkit-box-shadow:2px 2px 4px #888888;	
}
.digit
{
	display:inline;
}

C'est un choix de design global. Le design de chaque chiffre est modifié de façon dynamique par la fonction counterGradient.

La classe .digit n'est indispensable que si l'on place les chiffres dans des balises <div>. En utilisant <span> on peut s'en dispenser mais dans ce cas on peut pas définir la hauteur.

De même, si on place le compteur dans une balise <span>, on n'a pas besoin de spécifier sa largeur.

Télécharger le code JavaScript

Voir aussi