BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

Главная » Эффекты для сайта » Смена цифр на JavaScript

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

2016-01-27 / Вр:01:13 / просмотров: 7659

Всем привет!
Ломал голову над тем, как назвать заголовок, голову сломал, но так и не смог дать правильное название. Попробую объяснить принцип действия скрипта.
Вот, например, у вас есть сайт, где вы указываете в шапке количество подписчиков, покупателей или сколько  тон перевезли товаров и т.д. Так вот, когда посетитель перейдет на сайт, он обратит внимание на эти цифровые указатели, так как цифры анимировано будут меняться до указанного цифрового значения. Если указать число «1000», то при обновлении страницы, цифры начнут быстренько поочерёдно меняться от «0» до «1000».
Честно, я пытался объяснить, но сам вижу, что нужно для понимания показать демонстрацию:

[смотреть пример]

Вот, теперь всем стало ясно, что я здесь пытаюсь уже 5 минут объяснить.

Итак, чтобы сделать такой эффект на сайте, между тегами <head></head> вставьте вот такой JS скрипт:


<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(60203,'shethik-cifra',10,60);
</script>

Настройки:
Строка №15 -
60203 – это конечная цифра
10 – скорость смены цифр
60 – шаг смены цифры. Отсчет будет вот такой (1, 60, 120...60203).  Если указать «1», то отсчет будет вот такой (1,2,3,4…60203).

Теперь между тегами <body></body> вставьте вот такой код:

Нам доверяют:<div class="shethik-cifra" id="shethik-cifra"></div>

Вот такой чудо-скрипт! Как правильно его назвать, не знаю.

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Получай обновления блога!!! Подпишись:

Популярные статьи:

15 Ответов на комментарий - Смена цифр на JavaScript

  1. Сергей Высокин

    Думаю, Тут еще надо в скрипт дописать функцию зависимости скорости смены цифр в зависимости от тотальной суммы. Скажем, чтобы вне зависимости от числа общей суммы, вся анимация смены цифр занимала не более 3-5 секунд. Без этого, на мой взгляд, скрипт представляется недопиленным, неидеальным что ли.
    Наверное, число шага смены цифр должно меняться в зависимости от общей суммы. Количество шагов всегда одинаковое для набора любой тотальной суммы. Тогда, это число шага смены цифр задается через деление итоговой суммы на количество шагов. Такой вариант хода программистской мысли.

  2. Степан => автор блога Степан => автор блога

    Буду рад, если кто-то с такой программистской мыслью усовершенствует этот код :smile:

  3. Михаил

    Здравствуйте, Степан!

    А подскажите мне пожалуйста, как можно выравнять слово и цифры чтобы получились на одной строчке. а то я замучился не получается это сделать :?:
    Хотелось бы вот так ———– Нам доверяют: 69483

    Заранее спасибо. ;-)

  4. Степан => автор блога Степан => автор блога

    Здравствуйте, Михаил!
    Попробуйте вот так:

    Нам доверяют: <span class="shethik-cifra" id="shethik-cifra"></span>
    

    Полностью готовый код:

    <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(60203,'shethik-cifra',10,60);
    </script>
    
    Нам доверяют: <span class="shethik-cifra" id="shethik-cifra"></span>
    
  5. manager

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

  6. Степан => автор блога Степан => автор блога

    И зачем такое делать?
    В коде Строка №15 –
    60203 – это конечная цифра
    Ставите вместо этих цифр переменную, которая выводит результат в калькуляторе.

  7. Алекс

    Здравствуйте, подскажите как изменить размер цифр и цвет?

  8. Степан => автор блога Степан => автор блога

    Здравствуйте!
    В CSS вставьте вот такой код:

    div#shethik-cifra {
        font-size: 90px;
    }
    

    Что такое CSS читайте тут.

  9. Мария

    Спасибо всё чудно работает.

  10. Степан => автор блога Степан => автор блога

    Пожалуйста, Мария!

  11. алексей

    Привет, а не подскажешь как реализовать такое дело. есть цыфры от 1 до 10 например, как сделать чтоб при обновлении браузера число менялось по очереди. сначала 1, потом обновил браузер стало 2 итд до 10, а на 10 когда обновляешь 10 не переходин на 1 а останется 10 ?
    помоги старина

  12. Степан => автор блога Степан => автор блога

    на PHP пойдет?

  13. Александр

    Здравствуйте! Подскажите пожалуйста, как можно реализовать чтоб счетчик начал смену чисел только после нажатия на кнопку?

  14. Степан => автор блога Степан => автор блога

    Здравствуйте, Андрей!

    
     <a href="#" onclick=" tiktak(20000,'shethik-cifra',10,60);" >ссылка</a>
    <script>
     // значение начальной секунды
            var second=10;
            function tiktak(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;
    }
    })();
            }
    </script>
    
    Нам доверяют:<div class="shethik-cifra" id="shethik-cifra">0</div>
    

    Вам наверное будет интересно почитать статью на эту же тему.
    Рекомендую “События HTML5

  15. Александр

    Спасибо огромное!!! ;-)

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Метки: , , ,

Мои цели на 2018-2019:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Создать портфолио и мини интернет-магазин шаблонов

4). Довести количество статей до 800

5). Добиться посещаемости 3000 человек/сутки

6). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 802
Количество страниц на блоге: 20
Количество рубрик на блоге: 28
Количество меток на блоге: 72
Количество комментариев на блоге: 4573