Хаки и Скрипты Next Generation CMS

Смена цифр на JavaScript

irbees2008 irbees2008 Опубликовано - 21 - июня JS
5111 - 0
  • Адаптировал: irbees2008
  • Уровень сложности исполнения: нужны навыки css html

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

Итак, поехали , в секцию head добавляем скрипт:

Код:
<script>
function scroll(val,el,timeout,step){
var i=0;
(function(){
if(i<=val){
setTimeout(arguments.callee,timeout);
document.getElementById(el).innerHTML=i;
i=i+step;
}else{
document.getElementById(el).innerHTML=val;
}
})();
}
scroll(456,'shethik-cifra',5,10);
</script>

Вот настройки скрипта
456 – это конечная цифра
5 – скорость смены цифр
10 – шаг смены цифры. Отсчет будет вот такой (1, 10, 20...456). Если указать «1», то отсчет будет вот такой (1,2,3,4…456).

Теперь тамгде хотите видеть счетчик вставьте вот такой код:
Код:
Уже подписались:<div class="shethik-cifra" id="shethik-cifra"></div>

Вот и все ,пользуемся, ну стили по своему усмотрению прикрутите

Можешь почитать и вот эту статейку "Теги label"

Опрос

Ваше мнение

Какие темы вам интереснее?
Результаты

Последние комментарии

Теги

Anything in here will be replaced on browsers that support the canvas element

Статистика

  • Caйту: 4612 дней
  • Новостей: 568
  • Комменты: 257
  • Зарегистрированно : 673
  • Онлайн всего: [27]
  • Гости: [26]
  • Поисковики: [1] Яндекс
  • Были сегодня : [3] Google, Яндекс, Яндекс
  • SQL запросов: 29
  • Генерация страницы: 0.399сек
  • Потребление памяти: 5.536 Mb 
  •   Яндекс.Метрика