Solved

analog clock in javascript

Posted on 1997-11-17
6
879 Views
Last Modified: 2008-03-10
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
0
Comment
Question by:marschil
  • 4
6 Comments
 
LVL 6

Expert Comment

by:tecbuilder
ID: 1274147
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
 
LVL 2

Accepted Solution

by:
rigansen earned 200 total points
ID: 1274148
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
 
LVL 2

Expert Comment

by:rigansen
ID: 1274149
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
Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

 
LVL 2

Expert Comment

by:rigansen
ID: 1274150
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
 
LVL 1

Expert Comment

by:twexperts
ID: 1274151
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
 
LVL 2

Expert Comment

by:rigansen
ID: 1274152
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

Featured Post

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Capture logon name 13 73
Google map not loading in Bootstrap 3 modal 7 31
What am I doing wrong with this Lightbox widget? 6 34
alert(innerHTML); 8 14
This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

776 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question