JSFiddle - React, Tailwind, and code Playground
HTML
<section class="s" data-quantity="3.16" id="s01">
<h1>if 3.16 puppies are born every second</h1>
<b id="badge01" class="now">0</b> puppies have been born so far.<br>
<b class="morning">?</b> puppies have been born today<br>
<b class="month">?</b> puppies have been born since the first of this month.
</section>
<hr>
<section class="s" data-quantity="5" id="s02">
<h1>if 5 kittens are born every second</h1>
<b id="badge02" class="now">0</b> kittens have been born so far.<br>
<b class="morning">?</b> kittens have been born today<br>
<b class="month">?</b> kittens have been born since the first of this month.
</section>
<hr>
<section class="s" data-quantity="7" id="s03">
<h1>if 7 rats are born every second</h1>
<b id="badge03" class="now">0</b> rats have been born so far.<br>
<b class="morning">?</b> rats have been born today<br>
<b class="month">?</b> rats have been born since the first of this month.
</section>
JavaScript
var start = new Date(),
midnight = new Date(start.getFullYear(), start.getMonth(), start.getDate(), 0),
first = new Date(start.getFullYear(), start.getMonth(), 1);
var now = new Date(),
secondsFromStart = Math.floor((now - start)/1000),
secondsFromMidnight = Math.floor((now - midnight)/1000),
secondsFromFirst = Math.floor((now - first)/1000);
$(".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 () {
$(".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);