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"
Это тоже интересно
- 05.10.14Калькулятор калорий
- 25.09.17Асинхронная загрузка JS
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.