Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>the solution with data that omit the decimals on integer will be like this<br> you need to add a class in this case "s" and data-quantity </p> <pre><code>&lt;section class="s" data-quantity="3.16" id="s01"&gt; &lt;h1&gt;if 3.16 puppies are born every second&lt;/h1&gt; &lt;b id="badge01" class="now"&gt;0&lt;/b&gt; puppies have been born so far.&lt;br&gt; &lt;b class="morning"&gt;?&lt;/b&gt; puppies have been born today&lt;br&gt; &lt;b class="month"&gt;?&lt;/b&gt; puppies have been born since the first of this month. &lt;/section&gt; &lt;hr&gt; &lt;section class="s" data-quantity="5" id="s02"&gt; &lt;h1&gt;if 5 kittens are born every second&lt;/h1&gt; &lt;b id="badge02" class="now"&gt;0&lt;/b&gt; kittens have been born so far.&lt;br&gt; &lt;b class="morning"&gt;?&lt;/b&gt; kittens have been born today&lt;br&gt; &lt;b class="month"&gt;?&lt;/b&gt; kittens have been born since the first of this month. &lt;/section&gt; &lt;hr&gt; &lt;section class="s" data-quantity="7" id="s03"&gt; &lt;h1&gt;if 7 rats are born every second&lt;/h1&gt; &lt;b id="badge03" class="now"&gt;0&lt;/b&gt; rats have been born so far.&lt;br&gt; &lt;b class="morning"&gt;?&lt;/b&gt; rats have been born today&lt;br&gt; &lt;b class="month"&gt;?&lt;/b&gt; rats have been born since the first of this month. &lt;/section&gt; </code></pre> <p>JS </p> <pre><code>var start = new Date(), midnight = new Date(start.getFullYear(), start.getMonth(), start.getDate(), 0), first = new Date(start.getFullYear(), start.getMonth(), 1); //create now Date outside Interval var now = new Date(), secondsFromStart = Math.floor((now - start)/1000), secondsFromMidnight = Math.floor((now - midnight)/1000), secondsFromFirst = Math.floor((now - first)/1000); //create each $(".s").data with the values $(".s").each(function(){ var BornPerSec = $(this).data("quantity"), Start = secondsFromStart*BornPerSec, Midnight = secondsFromMidnight*BornPerSec, First = secondsFromFirst*BornPerSec; $(this).data("persec",{"BornPerSec":BornPerSec,"Start":Start,"Midnight":Midnight,"First":First}); }); setInterval(function () { //increment each $(".s").data values and set .text $(".s").each(function(){ var persec=$(this).data("persec"); persec.Start+=persec.BornPerSec; persec.Midnight+=persec.BornPerSec; persec.First+=persec.BornPerSec; $(this).children('.now').text(persec.Start % 1 === 0 ?persec.Start: persec.Start.toFixed(2)); $(this).children('.morning').text(persec.Midnight % 1 === 0 ?persec.Midnight:persec.Midnight.toFixed(2)); $(this).children('.month').text(persec.First % 1 === 0 ?persec.First:persec.First.toFixed(2)); }); }, 1000); </code></pre> <p><a href="http://jsfiddle.net/gJy4x/34/" rel="nofollow">http://jsfiddle.net/gJy4x/34/</a></p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload