title: JavaScript timer doesn't resume at specified time
body: <p>I got this timer I wrote for myself a while ago. Yesterday I implemented the pause feature, but when I pause it, record paused time and try to pass it again to the new timer - it starts earlier than I paused it. I was digging all day long and how sure where the problem is.</p>
  
  <p>Please help. </p>
  
  <p>P.S. Ignore <code>/1000</code>, I need unix timestamp for different purposes =)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var timerId;
  
  function startTimer(started) {
   var localTime = new Date()/1000;
  
   return setInterval(function() {
    var totalSeconds = ((new Date()/1000) - started);
    var hours = Math.floor(totalSeconds / 3600);
    totalSeconds = totalSeconds % 3600;
  
    var minutes = Math.floor(totalSeconds / 60);
    totalSeconds = totalSeconds % 60;
  
    var seconds = Math.floor(totalSeconds);
    hours = (hours &lt; 10 ? "0" : "") + hours;
    minutes = (minutes &lt; 10 ? "0" : "") + minutes;
    seconds = (seconds &lt; 10 ? "0" : "") + seconds;
  
    var timeString = hours + ":" + minutes + ":" + seconds;
  
    $('.timer .digits').text(timeString);
   }, 1000);
  }
  
  $('.start button').click(function() {
   timerId = startTimer(new Date()/1000);
    $('.start').hide().siblings('.pause').show();
  });
  
  $('.pause button').click(function() {
    var pausedTime = new Date()/1000;
   clearInterval(timerId);
    $('.timer').data('pausedTime', pausedTime);
    $('.pause').hide().siblings('.resume').show();
  });
  
  $('.resume button').click(function() {
    var pausedTime = $('.timer').data('pausedTime');
    timerId = startTimer(pausedTime);
    $('.resume').hide().siblings('.pause').show();
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.pause, .resume {
    display: none
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class='timer'&gt;
    &lt;div class='digits'&gt;00:00:00&lt;/div&gt;
    &lt;div class='start'&gt;&lt;button&gt;Start&lt;/button&gt;&lt;/div&gt;
    &lt;div class='pause'&gt;&lt;button&gt;Pause&lt;/button&gt;&lt;/div&gt;
    &lt;div class='resume'&gt;&lt;button&gt;Resume&lt;/button&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>