World clock with unique display

World clock script with unusual design. Cross-browser (IE4 contains additional visual effects). World clock<... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

Demo: JavaScript World clock with unique display
​

How to setup

Step 1: Use CSS code below for styling the script
CSS

Code:

<STYLE>
.topcoverlay {
	BACKGROUND-COLOR: #ffffff; FILTER: alpha(opacity=85); HEIGHT: 240px; LEFT: 0px; POSITION: absolute; TOP: 0px; WIDTH: 1000px
}
.bottomcoverlay {
	BACKGROUND-COLOR: #ffffff; FILTER: alpha(opacity=85); HEIGHT: 1000px; LEFT: 0px; POSITION: absolute; TOP: 253px; WIDTH: 1000px
}
</STYLE>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Step 2: Copy & Paste JavaScript code below in your HEAD section
JavaScript

Code:

<SCRIPT language=JavaScript>
<!-- Beginning of JavaScript -


var startpos=240
var bildhoehe=720
var step=3
var makepause=200
var difference=0
var local=1
var timer

function showtimelocal() {
	if (local==1) {
		var  thistime= new Date()
		var seconds=thistime.getSeconds()
		var minutes=thistime.getMinutes()
		var hours=thistime.getHours()
		if (hours>=24) {hours=hours-24}
		var secondspos=Math.floor(bildhoehe/60*seconds)
		var minutespos=Math.floor(bildhoehe/60*minutes)
		var hourspos=Math.floor(bildhoehe/60*hours)
		
		if(document.all) {
			document.all.secondsdiv.style.posTop=startpos-secondspos
			document.all.minutesdiv.style.posTop=startpos-minutespos
			document.all.hoursdiv.style.posTop=startpos-hourspos
		}
		
		if(document.layers) {
			document.secondsdiv.top=startpos-secondspos
			document.minutesdiv.top=startpos-minutespos
			document.hoursdiv.top=startpos-hourspos
		}
		var timer=setTimeout("showtimelocal()",makepause)
	}
	else {
		clearTimeout(timer)
	}
}

function preUTC(thisdifference) {
	clearTimeout(timer)
	difference=eval(thisdifference)
	local=0
	showtimeUTC()
}

function inititate() {
	if (document.layers) {
		document.markernetscape1.visibility="VISIBLE"
		document.markernetscape2.visibility="VISIBLE"
	}
	showtimelocal()
}

function prelocal() {
	if (document.layers) {document.markernetscape.visibility="VISIBLE"}
	clearTimeout(timer)
	local=1
	showtimelocal()
}

function showtimeUTC() {
	if (local==0) {
		var  thistime= new Date()
		var seconds=thistime.getSeconds()
		var minutes=thistime.getMinutes()
		var hours=thistime.getUTCHours()
		hours+=difference
		if (hours>=24) {hours=hours-24}
		var secondspos=Math.floor(bildhoehe/60*seconds)
		var minutespos=Math.floor(bildhoehe/60*minutes)
		var hourspos=Math.floor(bildhoehe/60*hours)
		
		if(document.all) {
			document.all.secondsdiv.style.posTop=startpos-secondspos
			document.all.minutesdiv.style.posTop=startpos-minutespos
			document.all.hoursdiv.style.posTop=startpos-hourspos
		}
		
		if(document.layers) {
			document.secondsdiv.top=startpos-secondspos
			document.minutesdiv.top=startpos-minutespos
			document.hoursdiv.top=startpos-hourspos
		}
		var timer=setTimeout("showtimeUTC()",makepause)
	}
	else {
		clearTimeout(timer)
	}
}

window.onload=inititate
// - End of JavaScript - -->
</SCRIPT>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Step 3: Place HTML below in your BODY section
HTML

Code:

<DIV id=secondsdiv style="LEFT: 200px; POSITION: absolute; TOP: 240px">
  <IMG 
src="rotaclock2930.gif" width="14" height="720"></DIV>
<DIV id=minutesdiv style="LEFT: 180px; POSITION: absolute">
  <IMG 
src="rotaclock2930.gif" width="14" height="720"></DIV>
<DIV id=hoursdiv style="LEFT: 160px; POSITION: absolute; TOP: 240px">
  <IMG 
src="rotaclock2930.gif" width="14" height="720"></DIV>
<DIV class=topcoverlay id=topcover></DIV>
<DIV class=bottomcoverlay id=bottomcover></DIV>
<DIV id=limiter1 
style="COLOR: #ff0000; FONT-FAMILY: Arial; FONT-SIZE: 8pt; FONT-WEIGHT: bold; LEFT: 176px; POSITION: absolute; TOP: 241px">
	:</DIV>
<DIV id=limiter2 
style="COLOR: #ff0000; FONT-FAMILY: Arial; FONT-SIZE: 8pt; FONT-WEIGHT: bold; LEFT: 196px; POSITION: absolute; TOP: 241px">
	:</DIV>
<DIV id=markernetscape1 
style="COLOR: #ff0000; FONT-FAMILY: Arial; FONT-SIZE: 12pt; FONT-WEIGHT: bold; LEFT: 122px; POSITION: absolute; TOP: 248px; VISIBILITY: hidden"><IMG 
height=1 src="line2930.gif" width=20></DIV>
<DIV id=markernetscape2 
style="COLOR: #ff0000; FONT-FAMILY: Arial; FONT-SIZE: 12pt; FONT-WEIGHT: bold; LEFT: 230px; POSITION: absolute; TOP: 248px; VISIBILITY: hidden"><IMG 
height=1 src="js 46_files/line2930.gif" width=20></DIV>
<DIV id=timezones 
style="COLOR: #ff0000; FONT-FAMILY: Arial; FONT-SIZE: 8pt; LEFT: 10px; POSITION: absolute; TOP: 5px"><A 
href="#" 
onmouseover=prelocal()>&gt;&gt; local time</A><BR><A 
href="#" 
onmouseover="preUTC('-8')">Anchorage</A><BR><A 
href="#" 
onmouseover="preUTC('-11')">Auckland</A><BR><A 
href="#" 
onmouseover="preUTC('3')">Baghdad</A><BR><A 
href="#" 
onmouseover="preUTC('8')">Bejing</A><BR><A 
href="#" 
onmouseover="preUTC('-3')">Buenos Aires</A><BR><A 
href="#" 
onmouseover="preUTC('-6')">Denver</A><BR><A 
href="#" 
onmouseover="preUTC('8')">Hongkong</A><BR><A 
href="#" 
onmouseover="preUTC('-9')">Honolulu</A><BR><A 
href="#" 
onmouseover="preUTC('8')">Jakarta</A><BR><A 
href="#" 
onmouseover="preUTC('2')">Johannesburg</A><BR><A 
href="#" 
onmouseover="preUTC('2')">Kairo</A><BR><A 
href="#" 
onmouseover="preUTC('-5')">Lima</A><BR><A 
href="#" 
onmouseover="preUTC('1')">London</A><BR><A 
href="#" 
onmouseover="preUTC('-7')">Los Angeles</A><BR><A 
href="#" 
onmouseover="preUTC('4')">Moscow</A><BR><A 
href="#" 
onmouseover="preUTC('3')">Nairobi</A><BR><A 
href="#" 
onmouseover="preUTC('-4')">New York</A><BR><A 
href="#" 
onmouseover="preUTC('2')">Paris</A><BR><A 
href="#" 
onmouseover="preUTC('-2')">Rio</A><BR><A 
href="#" 
onmouseover="preUTC('10')">Sydney</A><BR><A 
href="#" 
onmouseover="preUTC('9')">Tokyo</A><BR></DIV>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Step 4: must download files below
Files
rotaclock2930.gif

Javascript Music Player - Random Text Generator - Floating Image Script​