Форум

dima85 · #1 (**permalink**) 28.07.2018, 21:44

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

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

рони · #3 (**permalink**) 28.07.2018, 22:23

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 · #4 (**permalink**) 28.07.2018, 22: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

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

Форум

Справочник

Discord чат

Курсы javascript