Elapsed Timer (ElapseMe.js)


A quick search for javaScript counters brings up a list of sites that show you how to create javaScript countdowns. It was difficult to actually find “count up” scripts, so I decided to develop my own one called ElapseMe.js and make it freely accessible to everyone. So here goes…

This is basically a count up script from a specific date. It shows the days, hours, minutes and seconds that have elapsed since a given start date. You have the option to display only the values you want and also to set the seconds to tick over automatically. This script is an improvement from the old version I had written in 2007. It is really simple to setup and is unobtrusive.

Source files with demos located on GITHUB here.

To use, simply add the elapseMe.min.js file to the your web page (in the head section). For example:

<script type="text/javascript" src="elapseMe.min.js"></script>

Next call the elapseMe() function either with or without options. The DOM does need to be created before calling this function. To make sure this happens, we can wrap this call in a window.onload event like so:

<script type="text/javascript">
window.onload = function()
{  
  elapseMe({year: 2010, month: 5,day: 21,targetId:"elapsedTime1"});  
}
</script>

Finally, be sure to define an element in the body of the page with the same targetId you used above. For example:

<div id="elapsedTime1"> </div>

Options available:

  • year – four digit year. Default is the current year for the time right now.
  • month – must be between 0 and 11 (0 being January and 11 being December). Default is the current month for right now.
  • day – the day of the month from 1 – 31. Default is the current day for right now.
  • hr – the hour of the day from 0 – 23. Default is the current hour for right now.
  • min – the minute of the hour from 0 – 59. Default is the current minutes for right now.
  • sec – the seconds of the minute from 0 – 59. Default is the current seconds for right now.
  • targetId – the id of html element to display elapsed time. Default is “elapsedTime”.
  • update – set to false if you do not want the elapsed time to tick over each second. Default is true.
  • show – use this to define a list of values you want shown in the resulting elapsed time output. The default for this is “all” and will shows the days, hours, minutes and seconds elapsed. The values accepted are “days,hours,minutes,seconds,all”

Tip

This script can also be used for count downs. Just set the starting date details to a future date (for example: the upcoming new years day).

Wrap Up!

You may use this script as long as the header in the JS file remains intact.

Thanks and enjoy!

Advertisements

13 thoughts on “Elapsed Timer (ElapseMe.js)

  1. @ElvisMiranda

    @emilpk, dejame felicitarte por un excelente trabajo, muy útil el script, felicidades y gracias por el esfuerzo.

    Saludos.

    @ElvisMiranda

    1. Hi Darius,

      Here is a modified version of the javascript so you can use to show the months and weeks. Note that I’ve simplified the month calculation by assuming that 1 month = 4weeks. Hope this helps you out.

      var elapseMe = (function elapseTimer(settings)
      {
      var d = new Date();
      var defaults = {year: d.getFullYear(), month: d.getMonth(), day: d.getDate(), hr:d.getHours(), min: d.getMinutes(), sec: d.getSeconds(), targetId: “elapsedTime”, update : true, show : “all”};

      if(typeof settings == “undefined”) { settings = {}; }

      /*if some settings are omitted, reset those to the default ones.*/
      for(var i in defaults) { settings[i] = (typeof settings[i] == “undefined”) ? defaults[i] : settings[i]; }

      var startDate = new Date();

      startDate.setYear(settings.year);
      startDate.setMonth(settings.month);
      startDate.setDate(settings.day);
      startDate.setHours(settings.hr);
      startDate.setMinutes(settings.min);
      startDate.setSeconds(settings.sec);
      var rightNow = new Date();

      /* Get elapsed time. */
      var elapsedTime = rightNow.getTime() – startDate.getTime();
      var milliSecondsRemaining = elapsedTime;

      /* Get 1 month in milliseconds, ie 1000*60*60*24*7*4 */
      var one_month = 2419200000;
      var elapsedMonths = Math.floor(milliSecondsRemaining / one_month);

      /* Milliseconds still unaccounted for – less than a week’s worth. */
      milliSecondsRemaining = milliSecondsRemaining % one_month;

      /* Get 1 week in milliseconds, ie 1000*60*60*24*7 */
      var one_week = 604800000;
      var elapsedWeeks = Math.floor(milliSecondsRemaining / one_week);

      /* Milliseconds still unaccounted for – less than a week’s worth. */
      milliSecondsRemaining = milliSecondsRemaining % one_week;

      /* Get 1 day in milliseconds, ie 1000*60*60*24 */
      var one_day = 86400000;
      var elapsedDays = Math.floor( milliSecondsRemaining / one_day );

      /* Milliseconds still unaccounted for – less than a day’s worth. */
      milliSecondsRemaining = milliSecondsRemaining % one_day;

      /* Get 1 hour in milliseconds, ie 1000*60*60 */
      var one_hour = 3600000;
      var elapsedHours = Math.floor(milliSecondsRemaining / one_hour );

      /* Milliseconds still unaccounted for – less than an hour’s worth. */
      milliSecondsRemaining = milliSecondsRemaining % one_hour;

      /* Get 1 minute in milliseconds, ie 1000*60 */
      var one_minute = 60000;
      var elapsedMinutes = Math.floor(milliSecondsRemaining / one_minute );

      /* Milliseconds still unaccounted for – less than a minute’s worth. */
      milliSecondsRemaining = milliSecondsRemaining % one_minute;

      /* Get 1 second in milliseconds */
      var one_second = 1000;
      var elapsedSeconds = Math.round(milliSecondsRemaining / one_second);

      var resultOut = (settings.show == “all” || settings.show.match(/months/gi) ) ? elapsedMonths + ” Month” + ((elapsedMonths == 1) ? ” “:”s “) :””;
      resultOut += (settings.show == “all” || settings.show.match(/weeks/gi) ) ? elapsedWeeks + ” Week” + ((elapsedWeeks == 1) ? ” “:”s “) :””;
      resultOut += (settings.show == “all” || settings.show.match(/days/gi) ) ? elapsedDays + ” Day” + ((elapsedDays == 1) ? ” “:”s “) :””;
      resultOut += (settings.show == “all” || settings.show.match(/hours/gi) ) ? elapsedHours + ” Hour” + ((elapsedHours == 1) ? ” “:”s “) :””;
      resultOut += (settings.show == “all” || settings.show.match(/minutes/gi) ) ? elapsedMinutes + ” Minute” + ((elapsedMinutes == 1) ? ” “:”s “) :””;
      resultOut += (settings.show == “all” || settings.show.match(/seconds/gi) ) ? elapsedSeconds + ” Second” + ((elapsedSeconds == 1) ? ” “:”s “) :””;

      document.getElementById(settings.targetId).innerHTML = resultOut;

      if(settings.update)
      {
      t = setTimeout(function(){ elapseTimer(settings)},1000);
      }
      });

  2. JaviBocaPalma

    Hey!!..Thanks , your post was very usesful. But I had a problem when my application performed several calls to this function, javascript opened a new thread for each call. To solve that and I’ve added a new function in order to control the already opened instances, below your code and the workaround:

    elapseMe.js
    —————————————————————-
    var elapseMe = (function elapseTimer(settings) {
    /*…………
    ………… All elapseMe code……
    …………
    …………*/
    document.getElementById(settings.targetId).innerHTML = resultOut;

    if (settings.update) {
    set_time_out(settings.targetId, function() { elapseTimer(settings) }, 1000); //new
    }
    });
    /* wrapper */
    var timeout_handles = []
    function set_time_out(id, code, time)
    {
    if (id in timeout_handles) {
    clearTimeout(timeout_handles[id])
    }

    timeout_handles[id] = setTimeout(code, time)
    }

    —————————————————————————————-

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s