Счетчик цифр с двумя интервалами

127

04 января 2020, 20:40

Нужна ваша помощь в js и jquery.
Суть задачи такая - есть определенное число, например 190 000 тонн, при загрузке страницы это число должно с 0 досчитать до 190 000 за 15 секунд, а после этого каждые 30 секунд прибавлять еще по 1 (т.е. 190 001, 190 002 и т.д.).
Сохранять в кэше не нужно.

<span class="counter-number">192000</span> тонн произведено.

Первую часть скрипта я попытался наколхозить, а как потом после выполнения этой части, начать прибавлять по 1, я не оч понимаю.

$('.counter-number').each(function () {
    $(this).prop('Counter', 0).animate({
        Counter: $(this).text()
    }, {
        duration: 8000,
        easing: 'swing',
        step: function (now) {
            $(this).text(Math.ceil(now));
        }
    });
});

Answer 1

Я бы сделал не на задержках а при помощи дельты времени между кадрами:

let d = 190000; 
let t1 = 1000; 
let t2 = 3000; 
 
requestAnimationFrame(draw); 
 
function draw(dt) { 
  let amount = dt < t1 ? dt*d/t1 : (dt-t1)/t2 + d - 1; 
  document.querySelector('div').textContent =  Math.ceil(amount); 
  document.querySelector('span').textContent = (dt/1000).toFixed(2) + " sec"; 
  requestAnimationFrame(draw); 
}

<div></div> 
<span></span>

тут стоит t1 = 1 секунда на первый интервал и t2 = 3 секунды на второй (чтобы не ждать)

Answer 2

Вот вполне себе рабочее решение. Единственный момент: чтобы досчитать до 190 000 за 15 секунд, надо считать очень быстро, поэтому я сделал счёт сотнями. Ну и второй интервал для наглядности сделал 3 секунды, а не 30.

В принципе с параметром delay и инкрементом currentIndex Вы можете поиграться сами и посмотреть, как лучше для Вашей задачи. Главное, потестируйте в разных браузерах, потому что не все движки могут корректно отрабатывать при счёте единицами в короткий промежуток времени.

const counter = function(elem, delay, num) { 
  for(let currentIndex=0; currentIndex<=num; currentIndex+=100) { 
    (function(index) { 
      setTimeout(function() { 
        elem.textContent = index; 
        if(index == num) { 
          num++; 
          setInterval(function(){ 
            elem.textContent = num; 
            num++; 
          }, 3000) 
        } 
      }, delay*index); 
    })(currentIndex); 
  } 
} 
const counterNumber = document.getElementsByClassName('counter-number')[0]; 
counter(counterNumber, 0.08, 190000);

<div><span class="counter-number"></span> тонн произведено</div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Phaser 3.15.1 Мигание спрайта при коллизии

Я хочу реализовать покраснение экрана при столкновении с врагом, но по как-то причине мой код не работает

127

javascript

JS создать блок ниже или выше скрипта

Создаю скрипт вывода баннераЕсть блок с уникальным ID в него выводится баннер

139

MySQL

Node js отслеживание новых записей в БД mysql

Всем привет! При добавлении новой записи в бд mysql (хоть откуда, даже из phpmyadmin) мне нужно написать в consolelog('Новая запись с ID (id записи)'); как это...

112

MySQL

Как сделать выборку из БД с суммированием данных?

есть таблица с табелем работы (учетом рабочего времени), важные поля в ней

133