Question

I want to re-format the digital clock timer. When time is 3:15 (pm), jquery timmer show me 15:15pm and when 12:00 (am) it show me 24:00 (am). instead of 24 hours formatting can we set it to 12 hours formatting?

Example:

var maxnumhours = 11;
var maxnummins = 59;
var maxnumsecs = 60;
var maxmilisecs = 999;

$(document).ready(function() {
  updateClock();
  setInterval('updateClock()', 250 );
});

function hexifyWithZeroLead(tohex){
    var rtn = tohex.toString(16);
    return ( rtn.length == 1 ? "0" : "" ) + rtn;
}

function updateClock ( )
{
  var currentTime = new Date ( );
  var currentHours = currentTime.getHours();
  var currentMinutes = currentTime.getMinutes();
  var currentSeconds = currentTime.getSeconds();
  var currentMiliSeconds = currentTime.getMilliseconds();
  var rounded = currentSeconds + (currentMiliSeconds / maxmilisecs);

  rednum = (Math.round(255 * ((currentHours) / maxnumhours)));
  rednum100 = (Math.round(100 * ((currentHours) / maxnumhours)));
  greennum = (Math.round(255 * ((currentMinutes) / maxnummins)));
  greennum100 = (Math.round(100 * ((currentMinutes) / maxnummins)));
  bluenum = (Math.round(255 * ((rounded) / maxnumsecs)));
  bluenum100 = (Math.round(100 * ((rounded) / maxnumsecs)));

  redhex = hexifyWithZeroLead(rednum);
  greenhex = hexifyWithZeroLead(greennum);
  bluehex = hexifyWithZeroLead(bluenum);

  var hex = "#" + redhex + greenhex + bluehex;
  var fullredhex = "#"+redhex+"0000";
  var fullgreenhex = "#00"+greenhex+"00";
  var fullbluehex = "#0000"+bluehex;

  jQuery("#red_display").html(redhex);
  jQuery("#green_display").html(greenhex);
  jQuery("#blue_display").html(bluehex);

  leftpos = (rednum100 * 0.01 * 575) + 25;
  jQuery('#red_display').animate({left: leftpos}, 200);
  jQuery('#red_display').css('background-color',fullredhex);

  leftpos = (greennum100 * 0.01 * 575) + 25;
  jQuery('#green_display').animate({left: leftpos}, 200);
  jQuery('#green_display').css('background-color',fullgreenhex);

  leftpos = (bluenum100 * 0.01 * 575) + 25;
  jQuery('#blue_display').animate({left: leftpos}, 200);
  jQuery('#blue_display').css('background-color',fullbluehex);



  // Leading Zeros
  currentHours = ( currentHours < 10 ? "0" : "" ) + currentHours;
  currentMinutes = ( currentMinutes < 10 ? "0" : "" ) + currentMinutes;
  currentSeconds = ( currentSeconds < 10 ? "0" : "" ) + currentSeconds;
  jQuery("#clock").html("<span id='hours'>"+ currentHours + "</span>:<span id='minutes'>" + currentMinutes + "</span>:<span id='seconds'>" + currentSeconds + '</span>');
  jQuery("#hex").html(hex);
}

• http://jsfiddle.net/GmxHh/1/

Please help me.

Answer 1

Something like this?

var suffix = 'am';
if(currentHours > 12) {
    currentHours -= 12;
    suffix = 'pm';
}

Before the “Leading Zeros” section. Also, if you don’t want leading zeros for hours, “3:15” rather than “03:15”, just remove that line of code.