Fun of JavaScript: Swiss Analog 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

Swiss Analog Clock
Our famous Swiss Analog Clock has been greatly improved. Now it fits anywhere into your webpage. Unlike most other analog clocks this one works with IE5x/6x/7x/8x, FF3x/4x, Opera 7x/8x/9x/10x, Google Chrome 3x/4x/5x.

Configuration:

Step 1: Open your webpage that will display your Swiss Analog Clock. Use a simple texteditor (NotePad or WordPad). Insert the following code where you wish to display your Swiss Analog Clock.

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

var clipTop=0
var clipBottom=clipTop+60
var clipLeft
var clipRight
var imgSeconds
var imgMinutes
var imgHours
var imgClock
var textDate
var textDay
var textLink
var clipHours=""
var clipMinutes=""
var clipSeconds=""
var startLeft=7
var startTop=74
var tunePosHour =-2
var heute = new Date()
var dayofweek = heute.getDay()
var datetoday = heute.getDate()
if (dayofweek==0) { dayofweek = "sun" }
else if (dayofweek==1) { dayofweek = "mon" }
else if (dayofweek==2) { dayofweek = "tue" }
else if (dayofweek==3) { dayofweek = "wed" }
else if (dayofweek==4) { dayofweek = "thu" }
else if (dayofweek==5) { dayofweek = "fri" }
else if (dayofweek==6) { dayofweek = "sam" }

var browserinfos=navigator.userAgent 
var ie=document.all&&!browserinfos.match(/Opera/)
var ns6=document.getElementById&&!document.all&&!browserinfos.match(/Opera/)
var opera=browserinfos.match(/Opera/)

function tick() {
	var now = new Date()
	var nowHours = now.getHours()
	var nowMinutes = now.getMinutes()
	var nowSeconds = now.getSeconds()
	if (nowHours >= 12) {nowHours=nowHours-12}
	if (ie) {
		imgHours.posLeft=-(nowHours*60*5+((Math.round(nowMinutes/12))*60)+startLeft+tunePosHour)
		clipLeft = -(imgHours.posLeft)+25
	}
	if (ns6 || opera) {
		imgHours.left=-(nowHours*60*5+((Math.round(nowMinutes/12))*60)+startLeft+tunePosHour)
		clipLeft = -(parseInt(imgHours.left))+25
	}
	clipRight= clipLeft+58
	clipHours ="rect("+clipTop+" "+clipRight+" "+clipBottom+" "+clipLeft+")"
	imgHours.clip=clipHours
	
	if (ie) {
		imgMinutes.posLeft=-((nowMinutes)*60+startLeft)
		clipLeft = -(imgMinutes.posLeft)+25
	}
	if (ns6 || opera) {
		imgMinutes.left=-((nowMinutes)*60+startLeft)
		clipLeft = -(parseInt(imgMinutes.left))+25
	}
	clipRight= clipLeft+58
	clipMinutes ="rect("+clipTop+" "+clipRight+" "+clipBottom+" "+clipLeft+")"
	imgMinutes.clip=clipMinutes
	
	if (ie) {
		imgSeconds.posLeft=-((nowSeconds)*60+startLeft)
		clipLeft = -(imgSeconds.posLeft)+25
	}
	if (ns6 || opera) {
		imgSeconds.left=-((nowSeconds)*60+startLeft)
		clipLeft = -(parseInt(imgSeconds.left))+25
	}
	clipRight= clipLeft+58
	clipSeconds ="rect("+clipTop+" "+clipRight+" "+clipBottom+" "+clipLeft+")"
	imgSeconds.clip=clipSeconds
	
	var runClock = setTimeout("tick()", 400);
}

function DL_GetElementLeft(eElement) {
    var nLeftPos = eElement.offsetLeft;          
    var eParElement = eElement.offsetParent;     
    while (eParElement != null) {                                            
        nLeftPos += eParElement.offsetLeft;      
        eParElement = eParElement.offsetParent;  
    }
    return nLeftPos;                            
}

Step 2: Download clock.zip. It contains 4 images.

Step 3: Extract the 4 images and put them into the same folder that contains the webpage with you Swiss Analog Clock.