progress-timer-basic

basic example

HTML

<script src="//cdn.rawgit.com/homura/progress-timer/master/progress-timer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="timer1"></div>
<div id="timer2"></div>
<div>
  <button id="start">start</button>
  <button id="pause">pause</button>
  <button id="reset">reset</button>
</div>

JavaScript

var timer = new ProgressTimer()
  var t1 = document.getElementById('timer1')
  var t2 = document.getElementById('timer2')
  
  $('#start').on('click', function () {timer.start()})
  $('#pause').on('click', function () {timer.pause()})
  $('#reset').on('click', function () {timer.reset()})

  // this is ok
  setInterval(function () {
    var current = timer.current()
    var ms = Math.round(current % 1000)
    var s = Math.floor(current / 1000 % 60)
    var min = Math.floor(current / 60000)
    t1.innerHTML = min + ':' + s + '.' + ms
  }, 10)


  // or do this
  timer.on('change', function (current) {
    var ms = Math.round(current % 1000)
    var s = Math.floor(current / 1000 % 60)
    var min = Math.floor(current / 60000)
    t2.innerHTML = min + ':' + s + '.' + ms
  })