Free JavaScript: Micro Clock

» 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

Micro Clock
The copy and paste code for our popular Micro Clock has become much more leaner and it requires no images any more. Micro Clock fits anywhere into your webpage. Easy configuration of form, size, colors. Works fine with Internet Explorer 5x/6x/7x/8x, Firefox 2x/3x, Opera 7x/8x/9x/10x, Google Chrome 3x/4x/5x/6x.

Configuration:

Step 1: Paste the following code anywhere into your webpage
(between <body>-tag and </body>-tag):

<script>
// CREDITS:
// Micro Clock
// By Peter Gehrig
// Copyright (c) 2010 Peter Gehrig. All rights reserved.
// Permission given to use the script provided that this notice remains as is.
// Additional scripts can be found at http://www.fabulant.com

// 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

/////////////////////////////////////////////////
// SCRIPT-CONFIGURATION STARTS HERE
/////////////////////////////////////////////////

// set the length for each hand (pixels)
var hand_sec_length=16
var hand_min_length=14
var hand_hour_length=12

// set the color for each hand (hexadecimal values required)
var hand_sec_color="#FF0000"
var hand_min_color="#0000FF"
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 for the face (pixels)
var face_width=36
var face_height=36

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

/////////////////////////////////////////////////
// SCRIPT-CONFIGURATION ENDS HERE
/////////////////////////////////////////////////

// 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

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)
}

else {
			document.write('<div style="position:absolute;left:'+x+'px;top:'+y+'px;background-color:'+face_outlinecolor+';width:'+face_outlineweight+'px;height:'+face_outlineweight+'px;overflow:hidden"></div>')
		}
	}
	for (i=1;i<=hand_sec_length;i++) {
		document.write('<div id="sec'+i+'" style="position:absolute;left:0px;top:0px;background-color:'+hand_sec_color+';width:'+hand_sec_weight+'px;height:'+hand_sec_weight+'px;overflow:hidden"></div>')
	}
	for (i=1;i<=hand_min_length;i++) {
		document.write('<div id="min'+i+'" style="position:absolute;left:0px;top:0px;background-color:'+hand_min_color+';width:'+hand_min_weight+'px;height:'+hand_min_weight+'px;overflow:hidden"></div>')
	}
	for (i=1;i<=hand_hour_length;i++) {
		document.write('<div id="hour'+i+'" style="position:absolute;left:0px;top:0px;background-color:'+hand_hour_color+';width:'+hand_hour_weight+'px;height:'+hand_hour_weight+'px;overflow:hidden"></div>')
	}
document.write('</div>')
window.onload=dorotate

</script>