analog clock in javascript

Im looking for an analog clock for my internet site
I dont no how to build it...
Do you know hou to bild it
or where kan i get it
marschilAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

tecbuilderCommented:
Does it have to be JavaScript?  I don't think it can be done.  However, there are many good clocks available as applets.  The Java Clock Shop located at http://www.cargobay.com/clockshop/ has many different types of clocks available including analog clocks.
0
rigansenCommented:
Well, there are some things you must know before building any analog clock:

You must know that there are some functions in JS that let you access the minutes, hour and seconds given a date:

getMinutes()
getHours()
getSeconds()

those functions are used to know the exact time you need to show in your page.

Also, you will need some gif images representing every digit from 0 to 9 and the colon, to display something like:  09:10:35

You must "name" every <img src> tag to be able to modify it when the clock changes, you could do something like:

<img src="0.gif" name="digit_hour1">
<img src="9.gif" name="digit_hour2">
<img src="colon.gif" name="colon1">
<img src="1.gif"  name="digit_min1">
<img src="0.gif" name="digit_min2">
<img src="colon.gif" name="colon2">
<img src="3.gif" name="digit_sec1">
<img src="5.gif" name="digit_sec2">

you don't need to name the "colon.gif" images, but if you want to emulate the blinking of any analog clock, you'll need them...

Now let's suppose the time shown above changes to 10:10:35, in some JS function ("timeout" function, keep on reading) you must do:

document.digit_hour1.src = '1.gif';
document.digit_hour2.src = '0.gif';

or you can allocate locally the Images you need with:

img_digit_1 = new Image(30,40);
img_digit_1.src = '1.gif'
img_digit_2 = new Image(30,40);
img_digit_2.src = '2.gif'

and so on...

the parameters (30,40) represent the image resolution of your gif images.

now you can do something like:

document.digit_hour1.src = img_digit_1.src;
document.digit_hour2.src = img_digit_0.src;

this last two lines work faster because you already have the images loaded, but I *think* it only works on Netscape 3.x and IE 4.0 .


Well, now you must "catch" any change in time (seconds or minutes) to be able to update your clock, you do that with the setTimeout() JS function, this function is used like this:

setTimeout("timeOut", 1000);

this call to setTimeout() should be call from a function receiving the onLoad event.

the first parameter ("timeout") is a JS function that you must provide and that must update the images the way shown above, the second parameter to this function specifies the milliseconds time interval, so with 1000 as parameter, our timeout function will be called every 1 second (1000 milliseconds). So you must have something like:

function timeOut()
{
   // do the time processing using getMinutes(), getHours() and getSeconds() and targeting the <img src> images.

   // finally, enables the timer again. *You need this*
   setTimeout("timeOut", 1000);
}

I think you have the idea, now is up to you to finish and make it work the way you want!!

If you have any problem leave me a comment and I'll try to make it clear to you.

        Good luck...

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
rigansenCommented:
yep, I know... I missread the word "ANALOG"...

anyway you can cut-paste the paragraphs that help you and drop the other ones...

nothing else to say...

    Good Luck...
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

rigansenCommented:
yep, I know... I missread the word "ANALOG"...

anyway, you can cut-paste the paragraphs that help you and drop the other ones...

nothing else to say...

    Good Luck...
0
twexpertsCommented:
Hi,
You could use rigansen's code, except have round gif images with the clock face having a clear(invisable background), and having say 12 images for each of the main hand locations. Of course this would mean that you would have either 24, or 36 different images for Hour, Minute, and second hands if you desided that they should be different, and then you could only jump up in
steps of 1 hour, 5 mins, and 5 seconds. However you could have 60 images for minutes and hours, and then just load up the one that is required for each minute.
Advice: Use an applet. :)
Robin (twexperts).
0
rigansenCommented:
twexperts is right is his way of thinking...

Maybe you'll need a frame just for keeping your clock, so you'll display in that frame a backgraund image with the clock face and the main hand location for every hour, 12 images that will be updated every hour. The trasparent background images are useful to display the minutes, you'll need 60 new images to display every minute...

the problem becomes a mess if you're planning to show the seconds...  ;)

regards, rigansen.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.