Jump to content

Check out our Community Blogs

Register and join over 40,000 other developers!

Recent Status Updates

View All Updates

- - - - -

JavaScript Clock Gadget


  • Please log in to reply
No replies to this topic

#1 RhetoricalRuvim


    JavaScript Programmer

  • Expert Member
  • PipPipPipPipPipPipPip
  • 1311 posts
  • Location:C:\Countries\US
  • Programming Language:C, Java, C++, PHP, Python, JavaScript

Posted 07 August 2012 - 06:24 PM

I recently decided to challenge myself to write a customizable analog clock gadget. This was nothing, compared to some other projects I'm working on; it took me a couple (maybe a bit more) hours to develop the script.

Posted Image

Anyway, here's the StartClock () function syntax:
return_value= StartClock (container_element, width, height, extra, callback);

container_element => The container element (DIV, SPAN, etc.) that will hold the clock.
width => The desired width for the clock.
height => The desired height for the clock.
extra => Optional. An object containing additional parameters.
callback => Optional. A callback function that returns the current time for the clock.

If present, the callback function is called ever second and its return value is used as a date object for what time to display. If omitted, the real date (Javascript's 'new Date ()') is used.

Return Value:
return_value is a handle to an element object that can be used for adding custom content to the clock's interior surface (see the second clock in the provided example HTML).

Here's a bit of documentation for the 'extra' (function parameter) object's properties:
font The clock digits font (default arial).
size The font-size for the clock digits (default 14).
color Color for the clock digits (default #000000).
outline Outline color for the clock digits (default none).

frame_width Clock frame width (default 5).
frame_outer_stroke Frame outer line color (default none).
frame_inner_stroke Frame inner line color (default none).
frame_outer_width Frame outer line width (default 1).
frame_inner_width Frame inner line width (default 1).
frame_color Clock frame color (default RGBA(0,0,0,0)).
frame_padding Clock frame's padding for clock contents (default 0).

bgcolor Background color for the clock (default none or frame_color).

hour_color Color of the hour hand (default #000000).
minute_color Color of the minute hand (default #000000).
second_color Color of the second hand (default #FF0000).
hour_length Length of the hour hand, in full-hand units (default 0.4).
minute_length Length of the minute hand, in full-hand units (default 0.8).
second_length Length of the second hand, in full-hand units (default 0.9).
hour_width Width of the hour hand, see *note.
minute_width Width of the minute hand*.
second_width Width of the second hand*.

*Note: The hand widths' units can have different meanings, depeding
on the sign of the magnitudes:
- If the width is a positive value, the width will be in
the current hand's length units.
- If the width is a negative value, the width will be in
pixel units.
- If the width is zero (0), the width will be one (1) pixel.

/* --- Some weird things happened to the code tags here, so I'll take out the code from the post and instead put a link to it. --- */

Here's the link to the code:
Clock Code

Here's an example page:

For some reason the numbers(/digits) are a bit off; they're a little too high and a little to much to the right, and I didn't know how to fix that. If anyone finds the solution to that /* EDIT: I think I found the solution to that, but I'm not sure if that's what it is. */, or if anyone has questions or comments, you're more than welcome to post here.
  • 0

Also tagged with one or more of these keywords: clock

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download