Recently been assigned a task to create a simple game for web site, without using Flash, Java, HTML5 Canvas or Unity plugin, and I have to use server side script as I need to do some backend process. I’ve combined with jquery for the front end UI update for much more smoother game play experience. I’ve got a nice polished web design from designer, so I decided to make the timer to more animated, I not yet familiar with the jquery and yet want to try build this on my own.

So I got myself a very dirty codes, but it served my purposed, and still got improvement, such as extending the jquery (I guess there already got such thing out there), automatically create the 6 tag, cleaning unnecessary codes.

Demo:

00:00:00

Update: Apparently it does not work well in Opera 10, the span will out of the position when it ticks, I have to change the "top": "+=40" to "top": "-20", the "top": "-=20" to "top": "20", and "top": "-=20" to "top": "0"

I’ve created 6 each with id specified for both digit of hours, minutes and seconds

<span id="h1">0</span><span id="h2">0</span>:<span id="m1">0</span><span id="m2">0</span>:<span id="s1">0</span><span id="s2">0</span>

First is the function to call every second,

var t;  
var ticks = 0;  
function doTime() {  
  ticks++;  
  Display();  
  t = setTimeout(doTime, 1000);  
}

Every second, this function will be called, and ticks will increase by 1, and then call the Display() function to display the time. As for the Display function,

var seconds = ticks;  
var minutes = parseInt(seconds / 60);  
var hours = parseInt(minutes / 60);  
seconds = seconds % 60;  
minutes = minutes % 60;

These few lines is basically get the total ticks, which increased every single seconds, is a total seconds count, then we get total hours, minutes and seconds (as in hh : mm : ss format).

$("#s1").html(LeadingZero(seconds).toString().substr(0, 1));  
$("#m2").html(LeadingZero(minutes).toString().substr(1, 1));  
$("#m1").html(LeadingZero(minutes).toString().substr(0, 1));  
$("#h2").html(LeadingZero(hours).toString().substr(1, 1));  
$("#h1").html(LeadingZero(hours).toString().substr(0, 1));

The above code is to displaying the timer in hh : mm : ss format, as I use a pair of span for hours, minutes and second respectively, as I want to animate each of it. I call the LeadingZero function to return me a zero leaded time, as 7 seconds will gave me “07”, and I use substring (substr) to get the digit separately. I include this bunch of codes to display the timer if there is a preset time, if the ticks is 0, this could be removed.

AnimateDisplay(“s2”);  
$("#s").html(LeadingZero(seconds).toString().substr(1, 1));  
if (seconds % 10 == 0) {  
  AnimateDisplay("s1"_;  
  $("#s").html(LeadingZero(seconds).toString().substr(0, 1));  
}

These codes use to animate the second digit of the seconds, as it will change every single second, so there is no checking required. I pass in the span ID to my AnimateDisplay function to handle the animation. After animate it I show it on the screen. As for the first digit of the seconds, it will get updated every 10 seconds, so I mod the seconds by 10, and animate it

if (seconds % 60 == 0) {  
  AnimateDisplay("m2");  
  $("#m2").html(LeadingZero(minutes).toString().substr(1, 1));  
}

if (minutes % 10 == 0 && seconds == 0) {  
  AnimateDisplay("m1");  
  $("#m1").html(LeadingZero(minutes).toString().substr(0, 1));  
}

if (minutes % 60 == 0 && seconds % 60 == 0) {  
  AnimateDisplay("h2");  
  $("#h2").html(LeadingZero(hours).toString().substr(1, 1));  
}

if (hours % 10 == 0 && minutes == 0 && seconds == 0) {  
  AnimateDisplay("h1");  
  $("#h1").html(LeadingZero(hours).toString().substr(0, 1));  
}

The above codes is just the same function as those used for the seconds, it update for minutes and hours. And for the LeadingZero function,

function LeadingZero(number) {  
  if (number >= 0 && number < 10) {
    return "0" + number;
  } else {
    return number;
  }
}

And the final part, the animation function AnimateDisplay

function AnimateDisplay(segment) {  
 $("#" + segment).css({"position": "relative"}).animate({  
  "top": "-=20", 
  "opacity": 0  
 }, 150)
  .animate({"top": "+=40"}, 1)
  .animate({"top": "-=20", "opacity": 1}, 200);  
}

This is one dirty jquery (I’m new to jquery), the purpose was taking a span tag ID (the parameter ‘segment’), find that span, and change it’s css position attribute to relative, because I want to use the relative position later on, after that I called the animate function from jquery, I set the top attribute for the span’s position to –20, and opacity to 0, at the speed of 150 milliseconds, what this does was it move the span upwards while changing it to transparent, which looks like it fading away to the top. After that I change it’s top downwards, 20pixel below the original position, because I want to make it fade in from the bottom, I animate it with 1 milliseconds (explain later), finally, I animate the span again, moving upwards by 20, it will ended on the original position, with full opacity.

I tried to use the fadeIn and fadeOut from jquery, but it seems like the moving part and the fading part won’t happen together, so I switch to using opacity animation. I’m using a animate({“top”:”+=40”},1) to place the span on the bottom, I tried to use the css to set the position, but it seems like not working, so I use the animate, set it to 1 milliseconds so that it looks like it warp from the bottom.

The codes doesn’t calculate for day, so it will end up having over 24 hours, but for my game project, hour will be rarely needed, so this dirty dirty code served my purpose.