Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 28.07.2018, 21:44
Профессор
Отправить личное сообщение для dima85 Посмотреть профиль Найти все сообщения от dima85
 
Регистрация: 14.03.2010
Сообщений: 193

Плавно смена показаний.
setInterval(function() {
document.getElementById('number').innerHTML = numY;
   }, 200);


Каждые 200мс отправляются данные numY на html страницу в id = number.

Данные numY могут сразу изменится например с 1000 до 2000. Подскажите пожалуйста как плавно показывать это возрастание или убывание, с шагом в 10, скорость в 200мс.
Ответить с цитированием
  #2 (permalink)  
Старый 28.07.2018, 22:01
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,033

dima85,
https://learn.javascript.ru/js-animation
Ответить с цитированием
  #3 (permalink)  
Старый 28.07.2018, 22:23
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,033

анимация числа js
dima85,
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <style type="text/css">
  div.hot{
      width: 100px;
      height: 100px;
      border: 1px dashed Gray;
      padding: 5px;
      color: #FFFFFF;
      font-size: 24px;
       line-height: 100px;
       text-align: center;
  }
  .Red{
      background-color: Red;
  }

  </style>

</head>

<body>


<div class="hot Red" id="number"></div>
<script>
   var d = performance.now(),
   from = numY = 0,
   elem = document.querySelector('#number');
   requestAnimationFrame(function e(a) {
                a = (a - d) / 200;
                1 < a && (a = 1);
                elem.innerHTML = from + (numY - from) * a | 0;
                1 == a && (d = performance.now(), from = numY);
                requestAnimationFrame(e)
            })

setInterval(function() {
numY = (100 + Math.random()*3000|0);
   }, 1000);

</script>
</body>

</html>
Ответить с цитированием
  #4 (permalink)  
Старый 28.07.2018, 22:26
Профессор
Отправить личное сообщение для dima85 Посмотреть профиль Найти все сообщения от dima85
 
Регистрация: 14.03.2010
Сообщений: 193

var timePassed = 1000;

setInterval(function() {
//document.getElementById('number').innerHTML = numY;
 testnym(numY);
   }, 200);

   function testnym(name) {
    var timer = setInterval(function() {
     if (timePassed <= name) {
      timePassed = timePassed + 50;
     }
     if (timePassed >= name) {
      timePassed = timePassed - 50;
     }
     document.getElementById('number').innerHTML  = timePassed + '-'+name;
     clearInterval(timer);

    }, 200);
   }


Спасибо Рони за ссылки. Вот что у меня получилось. Теперь данные плавно шагают с 1000 до numY. Например дошли до 1300 и numY поменялось на 1100, должен идти плавный отсчет обратно до 1100. Даже если testnym нужно было идти дальше, счетчик должен остановится и идти в обратном направление. Как вам мой код? Может это все можно было сделать в первом setInterval? что бы не плодить их?
На телефоне почему-то не работает и в Chrome и в Firefox

ТЕМА ЗАКРЫТА, ВСЕ СДЕЛАЛ,.

Последний раз редактировалось dima85, 29.07.2018 в 10:02.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Плавно скрыть текст, изменить его и плавно показать gh321 jQuery 3 13.11.2013 15:38
Плавная смена background-image div-ва в котором есть контент phenom jQuery 1 09.04.2013 13:28
Плавная смена нескольких картинок shurik330 jQuery 0 10.02.2012 14:10
Как сделать, чтобы span или div исчезали и появлялись плавно? Бобр Общие вопросы Javascript 30 15.02.2011 18:44
Плавно выпадающий select revvo Элементы интерфейса 1 01.02.2011 15:51