World clock script with unusual design. Cross-browser (IE4 contains additional visual effects). World [URL="http://www.javascriptbank.com/javascript/time/clock-time-date/"]clock<... detail at JavaScriptBank.com - 2.000+ free JavaScript codes
Demo: JavaScript World clock with unique display
: Copy & Paste CSS code below in your HEAD section
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()>>> 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: Download files below
Files
rotaclock2930.gif
JavaScript Vertical Marquee - JavaScript DHTML analog clock - JavaScript Backwards Text
World clock with unique display
Linear Mode
