Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

analog clock in javascript

Posted on 1997-11-17
6
Medium Priority
?
897 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 400 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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

This article discusses how to create an extensible mechanism for linked drop downs.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
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…

636 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