Как с помощью скрипта изменить значение переменной предварительно вычислив его отталкиваясь от даты?

221

30 мая 2018, 19:20

Есть данная конструкция, она позволяет анимировать счетчик от нуля до указанного в настройках скрипта значения.

Как правильно добавить дополнительную функцию чтобы, к значению прибавлялся результат двух множителей

1-й множитель: шаг(установленное значение)

2-й множитель: число (дней, часов, лет) прошедших от указанной в скрипте даты (например 01 мая 2018)

Полученную сумму нужно прибавить к имеющимся в скрипте значениям:

у блока с классом nyear значение number изменялось каждый календарный год на +1

у блока с классом nclient значение number изменялось каждые календарные сутки на +10

у блока классом nproduct значение number изменялось каждые час на +5

пример: сейчас для числа с классом nyear установлено значение number 20 необходимо чтобы в 1 января 2019 года к данному числу был прибавлен +1 и в итоге анимированный счетчик покажет значение 21

или

пример: сейчас для числа с классом nclient установлено значение number 7100 сегодня 19 мая 2018 с момента начала отсчета (1 мая 2018) прошло 19 дней (раз значение меняется каждые сутки на +10 19х10=190) анимированный счетчик должен показывать 7290

Буду очень признателен за решение в виде скрипта!

$('.nyear') 
  .prop('number', 0) 
  .animateNumber({ 
      number: 20 
    }, 
    2000 
  ); 
 
$('.nclient') 
  .prop('number', 0) 
  .animateNumber({ 
      number: 7100 
    }, 
    2000 
  ); 
 
$('.nproduct') 
  .prop('number', 0) 
  .animateNumber({ 
      number: 22130 
    }, 
    2000 
  );

.nb { 
  background: #0e581b; 
  text-align: center; 
  width: 100%; 
  color: #fff; 
} 
 
.nb div { 
  display: inline-block; 
  padding: 20px 20px; 
} 
 
.nyear, 
.nclient, 
.nproduct { 
  font-size: 22px; 
  display: block; 
} 
 
.nb .td { 
  display: block; 
  font-size: 14px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-animateNumber/0.0.14/jquery.animateNumber.min.js"></script> 
 
<div class="nb"> 
  <div> 
    <span class="nyear"> </span> <span class="td">лет на рынке</span> 
  </div> 
  <div> 
    <span class="nclient"> </span> <span class="td">счастливых клиентов</span> 
  </div> 
  <div> 
    <span class="nproduct"> </span> <span class="td">проданных товаров</span> 
  </div> 
</div>

Answer 1

Получилась немного громоздкая конструкция, но так как работает за неимением другого варианта пока остановился на этом. Может быть кому-то пригодится.

Удалось реализовать задуманное (см. вопрос) с помощью немного другого скрипта анимации чисел: https://github.com/johnjcamilleri/jquery-spincrement и решения предложенного на страницах stackoverflow в этом ответе: https://ru.stackoverflow.com/a/302113/232533

Отсчет ведется от 01 января 2018 года. (дата указана в скрытом поле) Значения для множителей (с какого числа начинать отсчет и какой шаг использовать) берутся из настроек скрипта.

В итоге значения меняются с учетом хода времени (каждый час/день/год) для разных показателей задан свой шаг изменений.

Меняя время / начальную дату отсчета или значения множителей (начальное значение+шаг) можно проверить что считается все корректно (надеюсь).

Если будет предложен более компактный вариант, буду признателен т.к. с jQuery знаком очень поверхностно.

$(document).ready(function() { 
  var day = 1000 * 60 * 60 * 24; 
  var firstDate = new Date($('#startDate').val()); 
  var secondDate = new Date(); 
  var startCounter = $('#startCounter').val(); 
  var ystep = 1; // шаг для значения год - будет увеличиватся на одну еденицу каждый календарный год  
  var ynumstart = 19; //стартовое значение года 
  var clstep = 10; // шаг для значения клиенты - будет увеличиватся на 10 едениц каждые сутки 
  var clnumstart = 7100; //стартовое значение клиентов 
  var prodstep = 5; // шаг для значения товары - будет увеличиватся на 5 едениц каждый час 
  var prodnumstart = 22130; //стартовое значение товаров 
  var ynumvalue = Math.round(Math.abs((firstDate.getTime() - secondDate.getTime()) / (day) / 365) + ystep + ynumstart); 
  var clnumvalue = Math.round(Math.abs((firstDate.getTime() - secondDate.getTime()) / (day)) * clstep + clnumstart); 
  var prodnumvalue = Math.round(Math.abs((firstDate.getTime() - secondDate.getTime()) / (day) * 24 * 5) + prodstep + prodnumstart); 
 
  $('.nyear').text(ynumvalue).spincrement({ 
    thousandSeparator: "", 
    duration: 5000 
  }); 
 
 
  $('.nclient').text(clnumvalue).spincrement({ 
    thousandSeparator: "", 
    duration: 5000 
  }); 
 
 
 
  $('.nproduct').text(prodnumvalue).spincrement({ 
    thousandSeparator: "", 
    duration: 5000 
  }); 
 
});

.nb { 
  background: #0e581b; 
  text-align: center; 
  width: 100%; 
  color: #fff; 
} 
 
.nb div { 
  display: inline-block; 
  padding: 20px 20px; 
} 
 
.nyear, 
.nclient, 
.nproduct { 
  font-size: 22px; 
  display: block; 
} 
 
.nb .td { 
  display: block; 
  font-size: 14px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://rawgit.com/johnjcamilleri/jquery-spincrement/master/jquery.spincrement.min.js"></script> 
 
 
 
<div class="nb"> 
  <input type="hidden" value="01/01/2018" id="startDate" /> 
  <div> 
    <span class="nyear"> </span> <span class="td">лет на рынке</span> 
  </div> 
  <div> 
    <span class="nclient"> </span> <span class="td">счастливых клиентов</span> 
  </div> 
  <div> 
    <span class="nproduct"> </span> <span class="td">проданных товаров</span> 
  </div> 
</div>