1

Нужна ваша помощь в 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));
        }
    });
});

2 ответа 2

2

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

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 секунды на второй (чтобы не ждать)

0

Вот вполне себе рабочее решение. Единственный момент: чтобы досчитать до 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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.