A Colorful Clock With CSS and jQuery

http://tutorialzine.com/2009/12/colorful-clock-jquery-css

by eastlinkage • 17 years ago

11 5 17 years ago

NathanKP2• 17 years ago

It seems to me that the gauges are off by one value. For example at 11:00 it is showing a full half circle around the hour value rather than a half circle minus one notch.

In addition when it hits 45 seconds the second gauge is one notch past 3/4 of a minute rather than right at 3/4 of a minute.

I am viewing the clock with the latest version of Safari: Version 4.0.4 (6531.21.10)

Edit: Looks like I might have found the bug in the file jquery.tzineClock.js:

  function animation(clock, current, total)
  {
    // Calculating the current angle:
    var angle = (360/total)*(current+1);
    ....

There isn't any reason to add one to the current value. That makes the gauges one interval ahead of where they should be. I'm surprised that the author didn't notice this.

Edit #2:

Verified. I downloaded the sample source code, made the change and now the code operates as I would have expected it to. I left a comment on the original article telling the author about the bug.

Tutorialzine• 17 years ago

Hello Nathan, and thank you for the comment.

Actually the “off by one” bug is by design – it looks empty when the value of the dial is zero and the colorful ring around it is completely gone (and given it is midnight it would stay like this for an hour).

However you are free to change it – you’ll just need to change the line above from:

    var angle = (360/total)*(current+1);

To something like this:

    var angle = (360/(total-1))*current;

NathanKP2• 17 years ago

Hmm, that is a good point about the "empty ring" but it looks bad when the ring is off by one for the entire rest of the day.

fnid• 17 years ago

Doesn't work in Opera.

sam_in_nyc• 17 years ago

I was unaware that you could rotate things.

A Colorful Clock With CSS and jQuery

Related Stories