Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Увеличение дробного числа (https://javascript.ru/forum/misc/84983-uvelichenie-drobnogo-chisla.html)

Fox- 24.02.2023 17:44

Увеличение дробного числа
 
Здравствуйте, как можно увеличить в реальном времени? Принцип таймера, начать отсчитывать с 1.0 например до 1.100, когда достигнет 1.100 перестать отсчитывать, если с 1.0 до 2.10 указано в коде, то до этого числа считать. Сначала должно увеличиваться число после точки.
Пока получилось только так :

let n = $('#test').text().replace(/\D/g,'');

function separateNumber(x) {
  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " "); 
 
}



$({numberValue: n}).animate({numberValue: 10}, {
   duration: 5000,
   easing: "linear",
   step: function(val) {
      $('#test').text(separateNumber(Math.round(val)));
   }
});


Код:

<div id="test">1</div>
примерно так:
var timeElem = document.getElementById('time'), 
        countdown = new Date(),
        responseTime = new Date(Date.now() + (1000*10)); // таймер 10 секунд
 
function startTime() {
  countdown.setTime(responseTime - Date.now());
  timeElem.innerHTML = countdown.getUTCHours() + ':' + countdown.getUTCMinutes() + ':' + countdown.getUTCSeconds() + ':' + countdown.getUTCMilliseconds();
  if(countdown.getUTCHours() > 0 || countdown.getUTCMinutes() > 0 || countdown.getUTCSeconds() > 0) 
  requestAnimationFrame(startTime);
  else
  alert('Готово');
}
requestAnimationFrame(startTime);



но не нужен обратный отсчет и миллисекунды до ста только должны доходить

Rise 25.02.2023 00:46

Таймер от 0 до 100 миллисекунд? Думаете ваш мозг способен осознать анимацию на такой скорости? Вы что инопланетянин?

Fox- 25.02.2023 14:32

Цитата:

Сообщение от Rise (Сообщение 550882)
Таймер от 0 до 100 миллисекунд? Думаете ваш мозг способен осознать анимацию на такой скорости? Вы что инопланетянин?

Можно миллисекунды замедлить немного, например в первом коде за скорость смены анимации отвечает.
duration: 5000


и когда досчитает до того числа которое в коде указано вывести сообщение alert('Готово');
как это все можно сделать? Покажите пример please

рони 25.02.2023 17:56

Fox-,
https://javascript.ru/forum/misc/786...tml#post514405

Fox- 25.02.2023 19:59

Цитата:

Сообщение от рони (Сообщение 550897)

спасибо, ноэто я знаю как сделать, нужно типо с миллисекундами которые до ста, типо с 1.0 до 2.100 и при остановке таимера на 2.100 выдать alert
:help:

рони 25.02.2023 20:19

Анимация числа
 
Цитата:

Сообщение от Fox-
ноэто я знаю как сделать,

код из ссылки выше, что не так?
<div class="num"></div>
<script>
const elem = document.querySelector('.num');
const anim = () => {
    let d = performance.now(),
    from = 1,
    to = 2.1,
    duration = 5000;
    requestAnimationFrame( function e(b) {
    b = (b - d) / duration;
    1 <= b && (b = 1);
    let c = from + (to - from) * b ;
    elem.innerHTML = c.toFixed(3);
    b == 1 && alert('end');
    1 > b && requestAnimationFrame(e)
})
}
anim()
</script>

Fox- 11.05.2023 19:24

Цитата:

Сообщение от рони (Сообщение 550903)
код из ссылки выше, что не так?
<div class="num"></div>
<script>
const elem = document.querySelector('.num');
const anim = () => {
    let d = performance.now(),
    from = 1,
    to = 2.1,
    duration = 5000;
    requestAnimationFrame( function e(b) {
    b = (b - d) / duration;
    1 <= b && (b = 1);
    let c = from + (to - from) * b ;
    elem.innerHTML = c.toFixed(3);
    b == 1 && alert('end');
    1 > b && requestAnimationFrame(e)
})
}
anim()
</script>

спасибо, все отлично :)


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