Solved

analog clock in javascript

Posted on 1997-11-17
6
873 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

 
LVL 2

Expert Comment

by:rigansen
Comment Utility
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
Comment Utility
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
Comment Utility
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

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

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. …
This article discusses how to create an extensible mechanism for linked drop downs.
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…

743 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

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now