Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 12.01.2014, 16:30
Аватар для raler
Аспирант
Отправить личное сообщение для raler Посмотреть профиль Найти все сообщения от raler
 
Регистрация: 02.03.2011
Сообщений: 38

Плавное увеличение числа
Всем привет. Необходимо реализовать функцию плавного увеличения числа от 0 до какого-нибудь, за определенное время.

Самому не дошло, прошу совета у профессионалов!
Ответить с цитированием
  #2 (permalink)  
Старый 12.01.2014, 17:12
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,052

raler,

<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <script src="https://code.jquery.com/jquery-1.9.1.js"></script>
  <script>
      $(function () {
         $({
             n: 0
         }).animate({
             n: 1E3
         }, {
             duration: 20E3,
             step: function (a) {
                 $("#test").html(a | 0)
             }
         })
     });
  </script>
</head>

<body>
<div id="test"></div>
</body>
</html>

Последний раз редактировалось рони, 24.03.2018 в 00:01.
Ответить с цитированием
  #3 (permalink)  
Старый 12.01.2014, 17:20
Аватар для raler
Аспирант
Отправить личное сообщение для raler Посмотреть профиль Найти все сообщения от raler
 
Регистрация: 02.03.2011
Сообщений: 38

СПАСИБО!
отлично работает!
Ответить с цитированием
  #4 (permalink)  
Старый 12.01.2014, 17:25
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

jquery для этого не приспособлена
держи хак

<script src="https://code.jquery.com/jquery-2.0.3.js"></script>

<div id="result">Тут будет результат</div>

<script>

var res = $('#result');

$({ number: (parseFloat(prompt('Введите стартовое значение', '5')) || 0) } ).animate({ number: (parseFloat(prompt('Введите конечное значение', '405')) || 0)}, {
  duration: (parseFloat(prompt('Продолжительность в миллисекундах \n\t (вообще тут может быть алиас к времени - напр. "slow")', '6000')) || 400),
  easing: 'linear',
  queue: false,
  step: function (now, tween) {
    res.html( now );
  }
});
</script>

Последний раз редактировалось рони, 19.11.2022 в 06:23.
Ответить с цитированием
  #5 (permalink)  
Старый 12.01.2014, 17:35
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,052

raler, вариант без jquery
анимированне изменение числа
Ответить с цитированием
  #6 (permalink)  
Старый 19.01.2017, 09:34
Новичок на форуме
Отправить личное сообщение для tmn_Vlad Посмотреть профиль Найти все сообщения от tmn_Vlad
 
Регистрация: 19.01.2017
Сообщений: 1

Мой небольшой рабочий пример, сам новичок пишу всякую ерунду иногда), но тут перемешка js и jquery, так что не забудьте подключить jquery.
<span class="number-count__red">0</span>

var cikl = false;       //функция выполняется один раз
    window.onscroll = function scroll() {
            var scrollHeight = Math.max(
                document.body.scrollHeight, document.documentElement.scrollHeight,
                document.body.offsetHeight, document.documentElement.offsetHeight,
                document.body.clientHeight, document.documentElement.clientHeight
            );                                                                              //получаю высоту страницы
            var scrollTop = window.pageYOffset || document.documentElement.scrollTop;       //получаю цифру, на сколько прокручин элемент
            var scrollTopElemParent = $('.category__header').height();                      //высота header
            var scrollTopElem = $('#promos').offset();                                      //высота от header до нужного мне блока $('#promos')
            var start = 0, end = 135;                                                       // начало анимации конец анимации
            if (scrollTopElem.top < scrollTop + scrollTopElemParent + 400) {                // после того как мы докрутили до эелмента начинаем выполнять
                if (!cikl) {
                var element = $('.number-count__red')                                       //получаем наш селектор
                if (start <= end) {
                    var intervlal = setInterval(function () {                               //увеличиваем значение на 1 каждый1 0,2 сек.
                        element.innerHTML = start;                                          // записываем число в наш селектор
                        start += 1;
                        if (start == end) {                                                 //когда начальное значение и конечно будут равны оставнавливаем функцию
                            clearInterval(intervlal);
                            element.innerHTML = end;
                        }
                    }, 20);
                }
                    cikl = true;
            }
        }
    }
    }

Последний раз редактировалось tmn_Vlad, 19.01.2017 в 09:37.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
перевод числа в рейтинг (звезды) djonA Общие вопросы Javascript 17 07.03.2014 10:41
Увеличение числа через заданный промежуток времени gambit88 Общие вопросы Javascript 4 04.12.2013 12:37
Плавное увеличение картинки sash_ok.83 Events/DOM/Window 2 30.06.2012 12:22
Плавное увеличение картинки begin Общие вопросы Javascript 6 30.01.2012 21:33
число 76.4705882.. сделать 76.47? (числа всегда разные) TongaG Ваши сайты и скрипты 3 19.01.2010 07:35