Register on the forum now to remove ALL ads + popups + get access to tons of hidden content for members only!
Site Owners Forums - Webmaster ForumsCalendarContact Us

Go Back   Site Owners Forums - Webmaster Forums > Web Programming > Programming General > Javascript


Reply
 
Thread Tools Rate Thread Display Modes
Old 12-23-2009, 04:43 PM   #1
JavaScriptBank
Registered User
 
Join Date: Jul 2009
Posts: 80
World clock with unique display

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


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






JavaScriptBank is offline   Reply With Quote

Reply


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
PR4 Football / World Cup websites for sale isport Sell Sites 1 01-01-2010 10:24 AM
Unique Impressions & Unique Clicks at Campaign level for OpenX adserver The Market 0 02-15-2009 10:43 PM
PR3 SEO Blog 100% Unique Content Great Domain Name seovb Sell Sites 0 01-10-2009 01:51 PM
Led Display liJosinB Post your ad here 0 02-13-2007 01:33 AM
Led Display liJosinB Post your ad here 0 11-14-2006 09:46 PM


All times are GMT -7. The time now is 05:59 PM.


Powered by vBulletin® Version 3.8.5
Copyright ©2000 - 2010, Jelsoft Enterprises Ltd. Kindly hosted by OH Telecom servers (get one!)
Site Delivered By Liberty Of Mind - #1 Adult & Mainstream Solutions Provider

Virtual Dedicated Server     Advertise