1. This website uses cookies. By continuing to use this website you are giving consent to cookies being used.
    For information on cookies and how you can disable them visit our Cookie Usage page.
    Dismiss Notice

JavaScript World clock with unique display

Discussion in 'Web Development' started by JavaScriptBank, Dec 23, 2009.

  1. JavaScriptBank

    JavaScriptBank Banned

    World clock script with unusual design. Cross-browser (IE4 contains additional visual effects). World clock detail

    [​IMG]

    Demo: javascriptbank.com/world-clock-with-unique-display.html/en/
    ​

    How to setup

    Step 1: Place CSS 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: Use JavaScript code below to setup the script
    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: Copy & Paste HTML code 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: Download files below
    Files
    javascriptbank.com/javascript/time/rotaclock2930.gif






    Javascript floating message - Javascript multi level drop down menu - JavaScript in_array()​
     
    JavaScriptBank, Dec 23, 2009
    #1