Счетчик пульсаций в JavaScript

Сделать счетчик относительно легко. Если вы хотите продолжить и добавить графические эффекты, вы должны иметь доступ к каждой цифре индивидуально. Мы опишем общий сценарий, который позволяет это делать, с графическим эффектом по умолчанию, который дает импульсы цифрам и заставляет счетчик биться как сердце.

Затем можно будет изменить визуальный эффект, который будет применен к отображению цифр, изменив функцию, вызванную подстановочным сценарием.

В старых браузерах визуальный эффект пульсации не работает, отображается простой счетчик.

Показ

0000000


HTML-код

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

Он довольно простой. Кнопки on и off являются частью демонстрации, их можно взять в приложение, если вручную управлять запуском счетчика, или заменить на событие, которое это делает.

В любом случае запускается счетчик с функцией setInterval:

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

Общий код JavaScript

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;

Функция counterInit, автоматически начинающаяся с загрузки страницы, создает слой с уникальным идентификатором для каждой цифры. Для этого она вызывает функцию buildDisplay.
counterUpdate изменяет число, отображаемое счетчиком. Она вызывает digitUpdate с аргументом номер каждой цифры.
itUpdate вызывает функцию counterEffect с идентификатором каждого дигита и новой цифрой для отображения в аргументе.
Эту функцию можно изменить, чтобы установить другой визуальный эффект.

Код эффекта пульсации

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

Этот код создает эффект пульсации, постепенно исчезая текущую цифру и постепенно показывая новую цифру, за секунду в нашей демо (время может измениться в другом приложении).

Код CSS

Он дает своему виду счетчик в целом и в частности размер цифр. Это можно изменить в зависимости от приложения. 

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

Это выбор глобального дизайна. Дизайн каждой цифры динамически меняется функцией counterGradient.

Класс .digit необходим только при размещении цифр в тегах <div>. С помощью <stran> можно избавиться от этого, но в этом случае нельзя определить высоту.

Точно так же, если счетчик помещается в тег <stran>, не нужно указывать его ширину.

Загрузить код JavaScript

См. также