Solved

analog clock in javascript

Posted on 1997-11-17
6
883 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 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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Jquery form 9 40
How to calculate height of a text using jquery 3 42
Question regarding to $.ajax() with type "POST" vs $.post() 4 30
arrays and buttons with user input 2 34
I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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…

749 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