JavaScript Ripple Counter

Making a meter is relatively easy. If you want to go ahead and add graphic effects, you have to have access to each digit individually. We will describe a general scenario that allows this to be done, with a default graphical effect that gives pulses to the numbers and makes the counter beat like a heart.

You can then change the visual effect that will be applied to the digit display by changing the function called by the wildcard script.

In older browsers, the visual ripple effect does not work, a simple counter is displayed.

Display

0000000


HTML-code

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

It's pretty simple. The on and off buttons are part of the demonstration, they can be taken into the application if you manually control the launch of the counter, or replaced with an event that does this.

In any case, a counter with the setInterval function is launched:

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

Common JavaScript Code

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;

The counterInit function, which automatically starts with loading the page, creates a layer with a unique identifier for each digit. To do this, it calls the buildDisplay function.
counterUpdate changes the number displayed by the counter. It calls digitUpdate with the argument number of each digit.
itUpdate calls the counterEffect function with the ID of each digit and a new digit to display in the argument.
You can change this feature to set a different visual effect.

Ripple Effect Code

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);	
}

This code creates a ripple effect, gradually disappearing the current digit and gradually showing a new digit in a second in our demo (the time may change in another application ).

CSS code

He gives his species a counter in general and in particular the size of the digits. This can be changed depending on the 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;
}

It's a global design choice. The design of each digit is dynamically changed by the counterGradient function.

The.digit class is only needed when placing digits in <div> tags. With <stran> you can get rid of this, but in this case you cannot determine the height.

Similarly, if a counter is placed in the <stran> tag, you do not need to specify its width .

Download JavaScript code

See also