How to make the effect of rising prices (like a timer)?

Question

The page price is 126 rubles 00 kopecks. It is necessary to increase this price every minute by 1 ruble. And also for a minute pennies should increase, which show that the price is rising. How can this be implemented? If everything is clear with rubles, we use setInterval and after every 60000ms we save 1, then I can’t figure it out with kopecks.

Exactly the same as with rubles, only as usual, to add every 600ms
If you have rubles and kopecks are separate, in different tags, just always increase the penny.
It turns out that every second you do + 3 kopecks, or every 2 seconds + 6 kopecks ... As soon as the seconds become equal to 60, reset the kopecks and make +1 rubles.
setInterval does not guarantee exact intervals, you will not sync.
Such things always need to synchronize themselves through Date .
Or is it so important that it is at this minute and second that the ruble jumped, and not a millisecond later / earlier?
@Anon I mean, there is no point in measuring such things for a minute.
He will not leave so much that it can significantly affect the result.
And to complicate for the sake of this code, well, xs, controversial point.

Accepted Answer · 2017-02-07T12:04:48

Solution with inaccurate timer.

 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); }

 <div id="price"></div>

it was said Если с рублями все понятно, то с копейками не могу сообразить.
If you update every second, you get 60 updates per minute, during which time the ruble is added - 100 kopecks.
@SLy_huh and where is the condition that the user should see all updates?

Answer 2 · 2017-02-07T12:06:04

It is necessary to anchor the moment in time (the beginning of the countdown) and link it with the price.
Then you can often call the conversion function, and update the price, depending on the time passed from the beginning.

 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);

 <span id="cost">100.00</span>

I already broke my head, I see what works, but I can’t fully understand how ..

Answer 3 · 2017-02-07T12:24:49

 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);

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> Цена, руб. <span id='roubles'>126</span>.<span id='hundredths'>00</span>

All that I don’t like in this answer is the inner perfectionist) Still +1.
Well and still, it would be desirable a way to regulate speed)
I bring to your notice that I do not see it) Ubuntu, Chrome
@Anon, okay, this will also be removed, yet we are fighting for perfectionism, which means everything should be displayed everywhere to the maximum =)

Crantisz Crantisz 8.579 2 eight 38 · Answer 4 · 2017-02-07T12:02:27

Use operator % - remainder of division:

Test (accelerated):

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

console.log may be slower than you require from it) - vp_arth

How to make the effect of rising prices (like a timer)?

4 answers 4

More articles: