Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Плавно смена показаний. (https://javascript.ru/forum/events/74670-plavno-smena-pokazanijj.html)

dima85 28.07.2018 22:44

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


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

Данные numY могут сразу изменится например с 1000 до 2000. Подскажите пожалуйста как плавно показывать это возрастание или убывание, с шагом в 10, скорость в 200мс.

рони 28.07.2018 23:01

dima85,
https://learn.javascript.ru/js-animation

рони 28.07.2018 23:23

анимация числа 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>

dima85 28.07.2018 23:26

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

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


Часовой пояс GMT +3, время: 06:37.