U2 Counter

by shanejones

HTML

Seconds saved by our clients visitors since this page loaded
<br>
<div id="seconds" class="output"></div>
<br>
<br>
Formatted to look a bit nicer
<br>
<div id="seconds_formatted" class="output"></div>
<br>
<br>
Formatted in a different format
<br>
<div id="seconds_formatted_alt" class="output"></div>

<br>
<br>
Formatted better
<div id="time_format_days" class="output"></div>

SCSS

body {
  font-family: sans-serif;
  text-align: center;
}

.output {
  font-weight: bold;
  font-size: 24px;
}

JavaScript

var output = parseFloat(0.00);

setInterval(function(){
	var per_tick = parseFloat(10000.05) / 100;
  output = output + per_tick;
  
  $('#seconds').html(output.toFixed(0));
  
  $('#seconds_formatted').html( time_format(output.toFixed(0)) );
  
  $('#seconds_formatted_alt').html( time_format_alt(output.toFixed(0)) );
  
  $('#time_format_days').html( time_format_days(output.toFixed(0)) );
  
	
},10)


function time_format(time)
{   
    // Hours, minutes and seconds
    var hrs = ~~(time / 3600);
    var mins = ~~((time % 3600) / 60);
    var secs = time % 60;

    // Output like "1:01" or "4:03:59" or "123:03:59"
    var ret = "";

    if (hrs > 0) {
        ret += "" + hrs + ":" + (mins < 10 ? "0" : "");
    }

    ret += "" + mins + ":" + (secs < 10 ? "0" : "");
    ret += "" + secs;
    return ret;
}

function time_format_alt(time)
{   
    // Hours, minutes and seconds
    var hrs = ~~(time / 3600);
    var mins = ~~((time % 3600) / 60);
    var secs = time % 60;

    // Output like "1:01" or "4:03:59" or "123:03:59"
    var ret = "";

    if (hrs > 0) {
        ret += "" + hrs + " hrs " + (mins < 10 ? "0" : "");
    }

    ret += "" + mins + " mins " + (secs < 10 ? "0" : "");
    ret += "" + secs + ' secs';
    return ret;
}

function time_format_days(time)
{   
    // Hours, minutes and seconds
    var days = ~~(time / 86400);
    var hrs = ~~(time / 3600);
    var mins = ~~((time % 3600) / 60);
    var secs = time % 60;

    // Output like "1:01" or "4:03:59" or "123:03:59"
    var ret = "";

    if (days > 0) {
    	var dt;
    	if(days == 1){
      	dt = ' day ';
      } else {
      	dt = ' days ';
      }
    
        ret += "" + days + dt;
    }


    var ht;
    if (hrs > 0) {
      if (hrs == 1) {
          ht = ' hr ';
        } else {
          ht = ' hrs ';
        }
        ret += "" + hrs + ht + (hrs < 10 ? "0" : "");
    }

    ret += "" + mins + " mins " + (secs < 10 ? "0" : "");
    ret += "" + secs + ' secs';
    return ret;
}