title: jQuery Count Up Timer with starting point
body: <p>I am working on a page that allows an employee to keep track of how long it takes them to complete a task. There are two buttons, start and stop that save the actually timestamps in the database.</p>
  
  <p>However I want to give some type of visual counter as well, even thought the data from the counter it self will have no say in the starting and stopping of the timer; its all based on the timestamps.</p>
  
  <p>I found a countdown plugin that I reversed and made it count up to a date way in the future. As soon as they click "Start", the timer begins to count up to it.</p>
  
  <p>I am trying to build in a way to start the timer from a certain time if the user was to leave and come back. </p>
  
  <p>For example if the task has a timestamp of <code>September 1, 2015 at 12:00</code> then the timer would start at <code>4 days x hours x mins</code>.</p>
  
  <p>I added a setting onto the plugin called <code>resume</code> and <code>startTime</code> which triggers the <code>resumeTimer</code> function.</p>
  
  <p>Any thoughts on how I can do this?</p>
  
  <p>Here is a snippet:</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 globalContainer;
  
  (function($) {
  
    $.fn.upCount = function(options, callback) {
      var settings = $.extend({
        startTime: null,
        offset: null,
        reset: null,
        resume: null
      }, options);
  
      // Save container
      var container = this;
      globalContainer = container.parent().html();
  
      /**
       * Change client's local date to match offset timezone
       * @return {Object} Fixed Date object.
       */
      var currentDate = function() {
        // get client's current date
        var date = new Date();
  
        // turn date to utc
        var utc = date.getTime() + (date.getTimezoneOffset() * 60000);
  
        // set new Date object
        var new_date = new Date(utc + (3600000 * settings.offset))
  
        return new_date;
      };
  
      // Are we resetting our counter?
      if (settings.reset) {
        reset();
      }
  
      // Do we need to start our counter at a certain time if we left and came back?
      if (settings.startTime) {
        resumeTimer(new Date(settings.startTime));
      }
  
      // Define some global vars
      var original_date = currentDate();
      //console.log(currentDate())
      var target_date = new Date('12/31/2020 12:00:00'); // Count up to this date
  
      // Reset the counter by destroying the element it was bound to
      function reset() {
        var timerContainer = $('[name=timerContainer]');
        timerContainer.empty().append(globalContainer).find('.time').empty().append('00');
      }
  
      // Given a start time, lets set the timer
      function resumeTimer(startTime) {
        alert('Resume Timer Needs to Start From StartTime  ' + startTime)
        // This takes the difference between the startTime provided and the current date.
        // If the difference was 4 days and 25 mins, thats where the timer would start from continuing to count up
      }
  
      // Start the counter
      function countUp() {
  
        // Set our current date
        var current_date = currentDate();
  
        // difference of dates
        var difference = current_date - original_date;
  
        if (current_date &gt;= target_date) {
          // stop timer
          clearInterval(interval);
          if (callback &amp;&amp; typeof callback === 'function') callback();
          return;
        }
  
        // basic math variables
        var _second = 1000,
          _minute = _second * 60,
          _hour = _minute * 60,
          _day = _hour * 24;
  
        // calculate dates
        var days = Math.floor(difference / _day),
          hours = Math.floor((difference % _day) / _hour),
          minutes = Math.floor((difference % _hour) / _minute),
          seconds = Math.floor((difference % _minute) / _second);
  
        // fix dates so that it will show two digets
        days = (String(days).length &gt;= 2) ? days : '0' + days;
        hours = (String(hours).length &gt;= 2) ? hours : '0' + hours;
        minutes = (String(minutes).length &gt;= 2) ? minutes : '0' + minutes;
        seconds = (String(seconds).length &gt;= 2) ? seconds : '0' + seconds;
  
        // based on the date change the refrence wording
        var ref_days = (days === 1) ? 'day' : 'days',
          ref_hours = (hours === 1) ? 'hour' : 'hours',
          ref_minutes = (minutes === 1) ? 'minute' : 'minutes',
          ref_seconds = (seconds === 1) ? 'second' : 'seconds';
  
        // set to DOM
        container.find('.days').text(days);
        container.find('.hours').text(hours);
        container.find('.minutes').text(minutes);
        container.find('.seconds').text(seconds);
  
        container.find('.days_ref').text(ref_days);
        container.find('.hours_ref').text(ref_hours);
        container.find('.minutes_ref').text(ref_minutes);
        container.find('.seconds_ref').text(ref_seconds);
      };
  
      // start
      interval = setInterval(countUp, 1000);
    };
  
  })(jQuery);
  
  
  // Resume our timer from a specific time
  $('.countdown').upCount({
    startTime: '09/01/2015 12:00:00',
    resume: true
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>ul.countdown {
    list-style: none;
    margin: 15px 15px;
    padding: 0;
    display: block;
    text-align: center;
  }
  
  ul.countdown li {
    display: inline-block;
  }
  
  ul.countdown li span {
    font-size: 80px;
    font-weight: 300;
    line-height: 80px;
  }
  
  ul.countdown li.seperator {
    font-size: 80px;
    line-height: 70px;
    vertical-align: top;
  }
  
  ul.countdown li p {
    color: #a7abb1;
    font-size: 14px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /&gt;
  &lt;div class="container"&gt;
    &lt;div class="jumbotron" name="timerContainer"&gt;
      &lt;center&gt;
        &lt;span name="timerContainer"&gt;
           &lt;ul class="countdown"&gt;
              &lt;li&gt;
                 &lt;span class="days time"&gt;00&lt;/span&gt;
        &lt;p class="days_ref"&gt;days&lt;/p&gt;
        &lt;/li&gt;
        &lt;li class="seperator"&gt;.&lt;/li&gt;
        &lt;li&gt;
          &lt;span class="hours time"&gt;00&lt;/span&gt;
          &lt;p class="hours_ref"&gt;hours&lt;/p&gt;
        &lt;/li&gt;
        &lt;li class="seperator"&gt;:&lt;/li&gt;
        &lt;li&gt;
          &lt;span class="minutes time"&gt;00&lt;/span&gt;
          &lt;p class="minutes_ref"&gt;minutes&lt;/p&gt;
        &lt;/li&gt;
        &lt;li class="seperator"&gt;:&lt;/li&gt;
        &lt;li&gt;
          &lt;span class="seconds time"&gt;00&lt;/span&gt;
          &lt;p class="seconds_ref"&gt;seconds&lt;/p&gt;
        &lt;/li&gt;
        &lt;/ul&gt;
        &lt;/span&gt;
      &lt;/center&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://i.stack.imgur.com/jCwoj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jCwoj.png" alt="enter image description here"></a></p>