»
EnglishFrenchVietnamese

Print - World clock with unique display - JavaScriptBank.com

Full version: jsB@nk » Time » Clock » World clock with unique display
URL: https://www.javascriptbank.com/world-clock-with-unique-display.html

World clock with unique display © JavaScriptBank.comWorld clock script with unusual design. Cross-browser (IE4 contains additional visual effects). World clock shows the localtime of world-capitals onMouseover. Combines the latest DHTML-positioning and filter-techniques.

Full version: jsB@nk » Time » Clock » World clock with unique display
URL: https://www.javascriptbank.com/world-clock-with-unique-display.html



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


JavaScript
<SCRIPT language=JavaScript><!-- Beginning of JavaScript -var startpos=240var bildhoehe=720var step=3var makepause=200var difference=0var local=1var timerfunction 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-secondsposdocument.all.minutesdiv.style.posTop=startpos-minutesposdocument.all.hoursdiv.style.posTop=startpos-hourspos}if(document.layers) {document.secondsdiv.top=startpos-secondsposdocument.minutesdiv.top=startpos-minutesposdocument.hoursdiv.top=startpos-hourspos}var timer=setTimeout("showtimelocal()",makepause)}else {clearTimeout(timer)}}function preUTC(thisdifference) {clearTimeout(timer)difference=eval(thisdifference)local=0showtimeUTC()}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=1showtimelocal()}function showtimeUTC() {if (local==0) {var  thistime= new Date()var seconds=thistime.getSeconds()var minutes=thistime.getMinutes()var hours=thistime.getUTCHours()hours+=differenceif (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-secondsposdocument.all.minutesdiv.style.posTop=startpos-minutesposdocument.all.hoursdiv.style.posTop=startpos-hourspos}if(document.layers) {document.secondsdiv.top=startpos-secondsposdocument.minutesdiv.top=startpos-minutesposdocument.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-->


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


Files
http://javascriptbank.com/javascript/time/rotaclock2930.gif