JSFiddle - React, Tailwind, and code Playground

by mrcl

HTML

<div class="timer" data-start="" data-delta="0" data-pause="true">
  <span class="name">marc</span>
  <span class="zeit"></span>
  <button>P</button>
</div>


<div class="timer" data-start="" data-delta="0" data-pause="true">
  <span class="name">marc</span>
  <span class="zeit"></span>
  <button>P</button>
</div>


<div class="timer" data-start="" data-delta="0" data-pause="true">
  <span class="name">marc</span>
  <span class="zeit"></span>
  <button>P</button>
</div>


<div class="timer" data-start="" data-delta="0" data-pause="true">
  <span class="name">marc</span>
  <span class="zeit"></span>
  <button>P</button>
</div>



<div class="timer" data-start="" data-delta="0" data-pause="true">
  <span class="name">marc</span>
  <span class="zeit"></span>
  <button>P</button>
</div>

CSS

.timer {
  width: 200px;
  height: 60px;
  background: gold;
}

JavaScript

$('div').data("pause", true);

(function tick(sel) {

  $(sel).each(function() {
    var el = $(this).css("background", "lime");

    if (el.data("start") == "") {
      el.data("start", (new Date()).getTime());
    }

    console.log(el);

    passed = parseInt(el.data("delta")) + Math.floor(new Date().getTime() - parseInt(el.data("start")));

    if (el.data("pause") == true) {
      el.data("start", (new Date()).getTime());
    } else {  
      el.data("delta", passed);
      el.find(".zeit").text(passed / 1000 + " s");
    }
    
      console.log("passed "+passed);

  });

  setTimeout(tick.bind(null, sel), 4252);
})(".timer");

$("button").click(function() {
  $(this).parent().data("pause", !$(this).parent().data("pause"));
});