Как сделать эффект растущей цены (на подобие таймера)?

#javascript #jquery

На странице указана цена 126 рублей 00 копеек. Нужно эту цену каждую минуту увеличивать
на 1 рубль. И также в течение минуты должны увеличиваться копейки, которые показывают,
что цена растет. Как это можно реализовать? Если с рублями все понятно, используем
setInterval и через каждые 60000мс пребавляем 1, то с копейками не могу сообразить.
    

Ответы

Ответ 1

Решение с неточным таймером.


var price = 126.00;

updatePrice = function() {
  document.getElementById("price").innerHTML = XFormatPrice(price);
  price+=(100/60)/100;
}

updatePrice();

setInterval(updatePrice, 1000);

function XFormatPrice(_number) 
{
    var format_string = '# руб.';
 
    var r=parseFloat(_number)
 
    var exp10=Math.pow(10,2);
    r=Math.round(r*exp10)/exp10;
 
    rr=Number(r).toFixed(2).toString().split('.');
 
    b=rr[0].replace(/(\d{1,3}(?=(\d{3})+(?:\.\d|\b)))/g,"\$1"+' ');
 
    r=(rr[1]?b+ ',' +rr[1]:b);
    return format_string.replace('#', r);
}



Ответ 2

Нужно заякорить момент во времени(начало отсчёта) и связать его с ценой.
Потом можно часто вызывать функцию пересчёта, и обновлять цену, в зависимости от
пройденного от начала времени.  



var costEl = document.getElementById('cost');
var velocity = 1/60; // рубль в минуту

var start = Date.now();
var startCost = parseFloat(costEl.innerText);

setInterval(function(){
  var now = Date.now();
  var secs = (now - start) / 1e3;
  var newCost = (startCost + secs*velocity).toFixed(2);
  costEl.innerText = newCost;
}, 100);
100.00


Ответ 3

var velocity = 100;
setInterval(function(){
  var h = $('#hundredths').text();
  var r = $('#roubles').text();
  if(++h == 100){
    h = 0;
    r++;
  }
  
  $('#hundredths').text((h < 10 ? '0' : '') + h);
  $('#roubles').text(r);
}, velocity);

Цена, руб. 126.00


Ответ 4

Используйте оператор % - остаток от деления:

Тест (ускорен):



var x=0

setInterval(function(){
   x++
   console.log(x%100)
},60000/1000)