Free JavaScript: board with world time clocks

» home
» contact
» terms of use

FREE SCRIPTS

» new
» text
» image
» utility
» background
» animation
» date/time

FREE ONLINE TOOLS

» code generators
» text animator
» drawing animator
» color animator
» slideshow factory
» javascript speed test

FREE BASIC SNIPLETS

» alert box
» image: multi-rollover
» pop-up: centering
» more

FREE'N'CRAZY

» realtime death counter
» eyeQ
» fun ticker

RECOMMENDED LINKS

» www.dynamicdrive.com
» www.hotscripts.com

Free JavaScript: board with world time clocks
Add a unique board with lots of world time clocks to your website! The board contains as many clocks as you like, displaying the time from any locations all over the world. Very easy configuration of clock style, clock color, clock size, locations (time-zones) and text style. No images required! Internet Explorer 6x/7x/8x, Firefox 2x/3x, Opera 7x/8x/9x/10x, Google Chrome 3x/4x/5x/6x/7x.

Configuration:

Step 1: Open your webpage and paste the following code anywhere between <body> and </body>:

<style>
.clocktextstyle { /* set the style for the text below the clocks */
font-family:Arial;
font-size:7pt;
color:#aaaaaa;
}
</style>

// IMPORTANT:
// If you add this script to a script-library or script-archive
// you have to add a highly visible link to
// http://www.fabulant.com on the webpage
// where this script will be featured

/////////////////////////////////////////////////
// START OF SCRIPT-CONFIGURATION
/////////////////////////////////////////////////

// Set below the locations and the difference (hours) to Greenich Mean Time
// Add as many locations as you like
// IMPORTANT: study carefully where commas are required

var worldtime = [ // do not change this line

{
location : "Honolulu", // set any location
shift : -10 // set the difference to Greenich Mean Time (hours)
}, // comma is required!

{
location : "New York", // set any location
shift : -5 // set he difference to Greenich Mean Time (hours)
}, // comma is required!

{
location : "Paris, Berlin", // set any location
shift : 1 // set the difference to Greenich Mean Time (hours)
}, // comma is required!

{
location : "Kairo", // set any location
shift : 2 // set the difference to Greenich Mean Time (hours)
}, // comma is required!

{
location : "Hong Kong", // set any location
shift : 8 // set the difference to Greenich Mean Time (hours)
} // comma is NOT required for the last very line

] // do not change this line

// set the length for each hand (pixels)
var hand_sec_length=22
var hand_min_length=20
var hand_hour_length=15

// set the color for each hand (hexadecimal values required)
var hand_sec_color="#FF0000"
var hand_min_color="#000000"
var hand_hour_color="#000000"

// set the weight for each hand (pixels) 
var hand_sec_weight=1
var hand_min_weight=1
var hand_hour_weight=1

// set the weight of the face's outline (pixels)
var face_outlineweight=1

// set width and height of the face (pixels)
var face_width=50
var face_height=50

// set color of the face's outline
var face_outlinecolor="#000000"

// set the horizontal distance between the clocks (pixels)
var distance_between_clocks=40

// set the vertical distance to the text below the clocks(pixels)
var distance_to_text=10

// set the height of the two text lines below the clocks (pixels)
var text_height=30

/////////////////////////////////////////////////
// END OF SCRIPT-CONFIGURATION
/////////////////////////////////////////////////

// do not edit below this line
var pi= Math.PI
var x_sec=0
var y_sec=0
var x_min=0
var y_min=0
var x_hour=0
var y_hour=0
var angle=270
var x,y
var i_id=0
var ampm=""

function getxy(thistime,thisradius) {
	angle=6*parseInt(thistime)-90
	x=Math.round((thisradius*Math.cos(angle*(pi/180)))+face_width/2)
	y=Math.round((thisradius*Math.sin(angle*(pi/180)))+face_height/2)
}

</script>

Step 2: Go to the top lines of the style-code and configure the text-style.

Step 3: Go to the top lines of the script-code and configure the locations, the difference to Greenich Mean Time, the size and style of the clocks.