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

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

irbees2008 irbees2008 Опубликовано - 21 - июня JS
5263 - 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>

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

Можешь почитать и вот эту статейку "Вместо фона на сайте воспроизводится видео."

Опрос

Ваше мнение

Вы нашли что искали?
Результаты

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

Обновленное

Теги

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

Статистика

  • Caйту: 4737 дней
  • Новостей: 604
  • Комменты: 257
  • Зарегистрированно : 704
  • Онлайн всего: [16]
  • Гости: [16]
  • Были сегодня : [3] Яндекс, Google, irbees2008
  • SQL запросов: 29
  • Генерация страницы: 0.522сек
  • Потребление памяти: 5.159 Mb 
  •   Яндекс.Метрика