analog clock to gmt-8

**wynn** · 01-30-2007, 02:55 PM

1) Script Title: Analog Clock (Static)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex6/analog.htm

3) Describe problem:
hi. i saw this neat code.. but.
can i have it in gmt-8 and shows am pm and the number of the day.

i was looking for a dynamic clock that you can view in a specific timezone..
thanks..

**jscheuer1** · 01-30-2007, 08:52 PM

What do you mean by number of the day? 0-6? Or, do you mean the date? Also, where do you want this information displayed? In what format? Do you want:

daynumber am/pm(or AM/PM)

or:

am/pm(or AM/PM) daynumber

I've currently got it doing this:

Tue PM PST

just above the clock. Or optionally:

Tue PM GMT-8

**wynn** · 01-31-2007, 01:19 AM

aah. that would be good.. but.. will the time be set to gmt -8..?

cause we have to follow the time zone gmt-8.. and its not gmt-8 for some of us here..

i mean.. the clock wont follow the local time of the user.. but follows a specific time zone.

XD

**jscheuer1** · 01-31-2007, 04:32 AM

Yes, I forgot to mention. As long as the user's clock is set correctly and their browser supports the various UTC methods of the Date object, the time shown will be GMT-8 (the zone you choose is configurable). That's probably a bunch of mumbo jumbo to you but, most all modern browsers support this. We have no control over the accuracy of the user's computer's clock but, that also is usually correct, especially on any computer connected to the internet. In browsers that do not support the UTC methods of the Date object (only the very old ones do not), the user will see a plain clock displaying their own local time but, these browsers are so old that the rest of your page, in fact your entire site, probably will not display correctly. See:

http://home.comcast.net/~jscheuer1/s...alog_clock.htm

Use your browser's 'view source' to get the code or:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>
<body>
                                                                                                                                                                                                                
<script type="text/javascript">

//Analog clock script- By Kurt (kurt.grigg@virgin.net)
//Script featured on Dynamic Drive
//Updated 30/Jan/2007 for compatibility issues and GMT display
//in http://www.dynamicdrive.com/forums by:
//John Davenport Scheuer username:jscheuer1
//Visit http://www.dynamicdrive.com for TOS and more

function analog_clock(){
var timestring=''; //optional string to describe the type of time (ex: 'PST') use empty string for default (GMTtimeoffset);
var timeoffset=-8; //Offset from GMT
var fCol='444444'; //face colour.
var sCol='FF0000'; //seconds colour.
var mCol='444444'; //minutes colour.
var hCol='444444'; //hours colour.

var Ybase=30; //Clock height.
var Xbase=30; //Clock width.

/////////////////////// Stop Editing /////////////////////

var iecompattest=function(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body;
}

var H='...';
var H=H.split('');
var M='....';
var M=M.split('');
var S='.....';
var S=S.split('');
var Ypos=0;
var Xpos=0;
var dots=12;
var Split=360/dots;
if (window.innerWidth&&document.getElementById){
onreize=function(){clock.running=0};
document.write('<div id="n6Clock" style="position:absolute;top:0px;left:0px;width:90px;height:30px;font-family:Arial;font-size:10px;color:#'+fCol+';text-align:center;padding-top:10px;">AM</div>')
for (var i=1; i < dots+1; i++){
document.write('<div id="n6Digits'+i+'" style="position:absolute;top:0px;left:0px;width:30px;height:30px;font-family:Arial;font-size:10px;color:#'+fCol+';text-align:center;padding-top:10px">'+i+'</div>');
}
for (i=0; i < M.length; i++){
document.write('<div id="Ny'+i+'" style="position:absolute;top:0px;left:0px;width:2px;height:2px;font-size:2px;background:#'+mCol+'"></div>');
}
for (i=0; i < H.length; i++){
document.write('<div id="Nz'+i+'" style="position:absolute;top:0px;left:0px;width:2px;height:2px;font-size:2px;background:#'+hCol+'"></div>');
}
for (i=0; i < S.length; i++){
document.write('<div id="Nx'+i+'" style="position:absolute;top:0px;left:0px;width:2px;height:2px;font-size:2px;background:#'+sCol+'"></div>');
}
}
else if (document.layers){
var dgts='1 2 3 4 5 6 7 8 9 10 11 12';
dgts=dgts.split(' ')
for (var i=0; i < dots; i++){
document.write('<layer name=nsDigits'+i+' top=0 left=0 height=30 width=30><center><font face=Arial size=1 color='+fCol+'>'+dgts[i]+'</font></center></layer>');
}
for (i=0; i < M.length; i++){
document.write('<layer name=ny'+i+' top=0 left=0 bgcolor='+mCol+' clip="0,0,2,2"></layer>');
}
for (i=0; i < H.length; i++){
document.write('<layer name=nz'+i+' top=0 left=0 bgcolor='+hCol+' clip="0,0,2,2"></layer>');
}
for (i=0; i < S.length; i++){
document.write('<layer name=nx'+i+' top=0 left=0 bgcolor='+sCol+' clip="0,0,2,2"></layer>');
}
}
else if (iecompattest().clientWidth){
document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');
document.write('<div id="ieClock" style="position:absolute;top:0px;left:0px;width:90px;height:30px;font-family:Arial;font-size:10px;color:#'+fCol+';text-align:center;padding-top:10px">AM</div>');
for (var i=1; i < dots+1; i++){
document.write('<div id="ieDigits" style="position:absolute;top:0px;left:0px;width:30px;height:30px;font-family:Arial;font-size:10px;color:#'+fCol+';text-align:center;padding-top:10px">'+i+'</div>');
}
document.write('</div></div>')
document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < M.length; i++){
document.write('<div id=y style="position:absolute;width:2px;height:2px;font-size:2px;background:#'+mCol+'"></div>');
}
document.write('</div></div>')
document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < H.length; i++){
document.write('<div id=z style="position:absolute;width:2px;height:2px;font-size:2px;background:#'+hCol+'"></div>');
}
document.write('</div></div>')
document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < S.length; i++){
document.write('<div id=x style="position:absolute;width:2px;height:2px;font-size:2px;background:#'+sCol+'"></div>');
}
document.write('</div></div>')
}

var clock=function(){
var time = new Date ();
if (time.setUTCHours&&timeoffset)
time.setUTCHours(time.getUTCHours()+timeoffset);
var secs = time.getSeconds();
var sec = -1.57 + Math.PI * secs/30;
var mins = time.getMinutes();
var min = -1.57 + Math.PI * mins/30;
var hr = time.getUTCHours? time.getUTCHours() : time.getHours();
var hrs = -1.57 + Math.PI * hr/6 + Math.PI*parseInt(time.getMinutes())/360;
var ampm = hr>=12? 'PM' : 'AM';
ampm+=time.getUTCDay? ' '+(timestring? timestring:'GMT')+(timeoffset&&!timestring? timeoffset: '') : '';
var days=['Sun','Mon','Tue','Wed','Thur','Fri','Sat']
var day=days[time.getUTCDay? time.getUTCDay() : time.getDay()];

if (window.innerWidth&&document.getElementById){
if(clock.running<2){
clock.fy=iecompattest().offsetHeight>window.innerHeight||iecompattest().offsetWidth<window.innerWidth?50:25
clock.running++;
}
Ypos=window.pageYOffset+window.innerHeight-Ybase-clock.fy;
Xpos=window.pageXOffset+window.innerWidth-Xbase-(iecompattest().offsetWidth<window.innerWidth?35:30);
document.getElementById('n6Clock').style.top=Ypos-65+'px';
document.getElementById('n6Clock').style.left=Xpos-45+'px';
document.getElementById('n6Clock').innerHTML=day+' '+ampm;
for (var i=1; i < dots+1; i++){
 document.getElementById("n6Digits"+i).style.top=Ypos-15+Ybase*Math.sin(-1.56 +i *Split*Math.PI/180)+'px'
 document.getElementById("n6Digits"+i).style.left=Xpos-15+Xbase*Math.cos(-1.56 +i*Split*Math.PI/180)+'px'
 }
for (i=0; i < S.length; i++){
 document.getElementById("Nx"+i).style.top=Ypos+i*Ybase/4.1*Math.sin(sec)+'px';
 document.getElementById("Nx"+i).style.left=Xpos+i*Xbase/4.1*Math.cos(sec)+'px';
 }
for (i=0; i < M.length; i++){
 document.getElementById("Ny"+i).style.top=Ypos+i*Ybase/4.1*Math.sin(min)+'px';
 document.getElementById("Ny"+i).style.left=Xpos+i*Xbase/4.1*Math.cos(min)+'px';
 }
for (i=0; i < H.length; i++){
 document.getElementById("Nz"+i).style.top=Ypos+i*Ybase/4.1*Math.sin(hrs)+'px';
 document.getElementById("Nz"+i).style.left=Xpos+i*Xbase/4.1*Math.cos(hrs)+'px';
 }
}
else if (document.layers){
Ypos=window.pageYOffset+window.innerHeight-Ybase-20;
Xpos=window.pageXOffset+window.innerWidth-Xbase-30;
for (var i=0; i < dots; ++i){
 document.layers["nsDigits"+i].top=Ypos-5+Ybase*Math.sin(-1.045 +i*Split*Math.PI/180)
 document.layers["nsDigits"+i].left=Xpos-15+Xbase*Math.cos(-1.045 +i*Split*Math.PI/180)
 }
for (i=0; i < S.length; i++){
 document.layers["nx"+i].top=Ypos+i*Ybase/4.1*Math.sin(sec);
 document.layers["nx"+i].left=Xpos+i*Xbase/4.1*Math.cos(sec);
 }
for (i=0; i < M.length; i++){
 document.layers["ny"+i].top=Ypos+i*Ybase/4.1*Math.sin(min);
 document.layers["ny"+i].left=Xpos+i*Xbase/4.1*Math.cos(min);
 }
for (i=0; i < H.length; i++){
 document.layers["nz"+i].top=Ypos+i*Ybase/4.1*Math.sin(hrs);
 document.layers["nz"+i].left=Xpos+i*Xbase/4.1*Math.cos(hrs);
 }
}

else if (iecompattest().clientWidth){
Ypos=iecompattest().scrollTop+iecompattest().clientHeight-Ybase-25;
Xpos=iecompattest().scrollLeft+iecompattest().clientWidth-Xbase-20;
ieClock.style.top=Ypos-65+'px';
ieClock.style.left=Xpos-50+'px';
ieClock.innerHTML=day+' '+ampm;
for (var i=0; i < dots; ++i){
 ieDigits[i].style.pixelTop=Ypos-15+Ybase*Math.sin(-1.045 +i *Split*Math.PI/180)
 ieDigits[i].style.pixelLeft=Xpos-15+Xbase*Math.cos(-1.045 +i *Split*Math.PI/180)
 }
for (i=0; i < S.length; i++){
 x[i].style.pixelTop =Ypos+i*Ybase/4.1*Math.sin(sec);
 x[i].style.pixelLeft=Xpos+i*Xbase/4.1*Math.cos(sec);
 }
for (i=0; i < M.length; i++){
 y[i].style.pixelTop =Ypos+i*Ybase/4.1*Math.sin(min);
 y[i].style.pixelLeft=Xpos+i*Xbase/4.1*Math.cos(min);
 }
for (i=0; i < H.length; i++){
 z[i].style.pixelTop =Ypos+i*Ybase/4.1*Math.sin(hrs);
 z[i].style.pixelLeft=Xpos+i*Xbase/4.1*Math.cos(hrs);
 }
}
setTimeout(function(){clock();},30);
}
clock.running=0;
clock();
}
analog_clock();

</script>
</body>
</html>

**wynn** · 01-31-2007, 08:12 AM

yay thanks jscheuer1.. thanks very much. im usingit roght now..
and.. one last thing..
where can i add on top of Wed AM GMT-8 some words..
and the current date: "31" of gmt-8 time

ex:

- Editable Characters -
31 Wed AM GMT-8

**jscheuer1** · 01-31-2007, 04:53 PM

Try this version:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>
<body>

<script type="text/javascript">

//Analog clock script- By Kurt (kurt.grigg@virgin.net)
//Script featured on Dynamic Drive
//Updated 30/Jan/2007 for compatibility issues and GMT display
//in http://www.dynamicdrive.com/forums by:
//John Davenport Scheuer username:jscheuer1
//Visit http://www.dynamicdrive.com for TOS and more

function analog_clock(){
var timestring=''; //optional string to describe the type of time (ex: 'PST') use empty string for default (GMTtimeoffset);
var timeoffset=-8; //Offset from GMT
var fCol='444444'; //face colour.
var sCol='FF0000'; //seconds colour.
var mCol='444444'; //minutes colour.
var hCol='444444'; //hours colour.

var Ybase=30; //Clock height.
var Xbase=30; //Clock width.

/////////////////////// Stop Editing /////////////////////

var iecompattest=function(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body;
}

var H='...';
var H=H.split('');
var M='....';
var M=M.split('');
var S='.....';
var S=S.split('');
var Ypos=0;
var Xpos=0;
var dots=12;
var Split=360/dots;
if (window.innerWidth&&document.getElementById){
onreize=function(){clock.running=0};
document.write('<nobr onclick="alert(this.offsetWidth)" id="n6Clock" style="position:absolute;top:0px;left:0px;width:auto;height:30px;font-family:Arial;font-size:62.5%;color:#'+fCol+';text-align:center;padding-top:10px;">AM</nobr>')
for (var i=1; i < dots+1; i++){
document.write('<div id="n6Digits'+i+'" style="position:absolute;top:0px;left:0px;width:30px;height:30px;font-family:Arial;font-size:62.5%;color:#'+fCol+';text-align:center;padding-top:10px">'+i+'</div>');
}
for (i=0; i < M.length; i++){
document.write('<div id="Ny'+i+'" style="position:absolute;top:0px;left:0px;width:2px;height:2px;font-size:2px;background:#'+mCol+'"></div>');
}
for (i=0; i < H.length; i++){
document.write('<div id="Nz'+i+'" style="position:absolute;top:0px;left:0px;width:2px;height:2px;font-size:2px;background:#'+hCol+'"></div>');
}
for (i=0; i < S.length; i++){
document.write('<div id="Nx'+i+'" style="position:absolute;top:0px;left:0px;width:2px;height:2px;font-size:2px;background:#'+sCol+'"></div>');
}
}
else if (document.layers){
var dgts='1 2 3 4 5 6 7 8 9 10 11 12';
dgts=dgts.split(' ')
for (var i=0; i < dots; i++){
document.write('<layer name=nsDigits'+i+' top=0 left=0 height=30 width=30><center><font face=Arial size=1 color='+fCol+'>'+dgts[i]+'</font></center></layer>');
}
for (i=0; i < M.length; i++){
document.write('<layer name=ny'+i+' top=0 left=0 bgcolor='+mCol+' clip="0,0,2,2"></layer>');
}
for (i=0; i < H.length; i++){
document.write('<layer name=nz'+i+' top=0 left=0 bgcolor='+hCol+' clip="0,0,2,2"></layer>');
}
for (i=0; i < S.length; i++){
document.write('<layer name=nx'+i+' top=0 left=0 bgcolor='+sCol+' clip="0,0,2,2"></layer>');
}
}
else if (iecompattest().clientWidth){
document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');
document.write('<nobr id="ieClock" style="position:absolute;top:0px;left:0px;width:auto;height:30px;font-family:Arial;font-size:62.5%;color:#'+fCol+';text-align:center;padding-top:10px"></nobr>');
for (var i=1; i < dots+1; i++){
document.write('<div id="ieDigits" style="position:absolute;top:0px;left:0px;width:30px;height:30px;font-family:Arial;font-size:62.5%;color:#'+fCol+';text-align:center;padding-top:10px">'+i+'</div>');
}
document.write('</div></div>')
document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < M.length; i++){
document.write('<div id=y style="position:absolute;width:2px;height:2px;font-size:2px;background:#'+mCol+'"></div>');
}
document.write('</div></div>')
document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < H.length; i++){
document.write('<div id=z style="position:absolute;width:2px;height:2px;font-size:2px;background:#'+hCol+'"></div>');
}
document.write('</div></div>')
document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < S.length; i++){
document.write('<div id=x style="position:absolute;width:2px;height:2px;font-size:2px;background:#'+sCol+'"></div>');
}
document.write('</div></div>')
}

var clock=function(){
var time = new Date ();
if (time.setUTCHours&&timeoffset)
time.setUTCHours(time.getUTCHours()+timeoffset);
var dt=time.getUTCDate? time.getUTCDate() : time.getDate();
var secs = time.getSeconds();
var sec = -1.57 + Math.PI * secs/30;
var mins = time.getMinutes();
var min = -1.57 + Math.PI * mins/30;
var hr = time.getUTCHours? time.getUTCHours() : time.getHours();
var hrs = -1.57 + Math.PI * hr/6 + Math.PI*parseInt(time.getMinutes())/360;
var ampm = hr>=12? 'PM' : 'AM';
ampm+=time.getUTCDay? ' '+(timestring? timestring:'GMT')+(timeoffset&&!timestring? timeoffset: '') : '';
var days=['Sun','Mon','Tue','Wed','Thur','Fri','Sat']
var day=days[time.getUTCDay? time.getUTCDay() : time.getDay()];

if (window.innerWidth&&document.getElementById){
if(clock.running<2){
clock.fy=iecompattest().offsetHeight>window.innerHeight||iecompattest().offsetWidth<window.innerWidth?50:25
clock.running++;
}
Ypos=window.pageYOffset+window.innerHeight-Ybase-clock.fy;
Xpos=window.pageXOffset+window.innerWidth-Xbase-(iecompattest().offsetWidth<window.innerWidth?35:30);
document.getElementById('n6Clock').style.top=window.pageYOffset+window.innerHeight-Ybase*2-clock.fy-30-Ybase/20+'px'//Ypos-65+'px';
document.getElementById('n6Clock').style.left=Math.min(window.pageXOffset+window.innerWidth-document.getElementById('n6Clock').offsetWidth,Xpos-45)+'px';
document.getElementById('n6Clock').innerHTML=dt+' '+day+' '+ampm;
for (var i=1; i < dots+1; i++){
 document.getElementById("n6Digits"+i).style.top=Ypos-15+Ybase*Math.sin(-1.56 +i *Split*Math.PI/180)+'px'
 document.getElementById("n6Digits"+i).style.left=Xpos-15+Xbase*Math.cos(-1.56 +i*Split*Math.PI/180)+'px'
 }
for (i=0; i < S.length; i++){
 document.getElementById("Nx"+i).style.top=Ypos+i*Ybase/4.1*Math.sin(sec)+'px';
 document.getElementById("Nx"+i).style.left=Xpos+i*Xbase/4.1*Math.cos(sec)+'px';
 }
for (i=0; i < M.length; i++){
 document.getElementById("Ny"+i).style.top=Ypos+i*Ybase/4.1*Math.sin(min)+'px';
 document.getElementById("Ny"+i).style.left=Xpos+i*Xbase/4.1*Math.cos(min)+'px';
 }
for (i=0; i < H.length; i++){
 document.getElementById("Nz"+i).style.top=Ypos+i*Ybase/4.1*Math.sin(hrs)+'px';
 document.getElementById("Nz"+i).style.left=Xpos+i*Xbase/4.1*Math.cos(hrs)+'px';
 }
}
else if (document.layers){
Ypos=window.pageYOffset+window.innerHeight-Ybase-20;
Xpos=window.pageXOffset+window.innerWidth-Xbase-30;
for (var i=0; i < dots; ++i){
 document.layers["nsDigits"+i].top=Ypos-5+Ybase*Math.sin(-1.045 +i*Split*Math.PI/180)
 document.layers["nsDigits"+i].left=Xpos-15+Xbase*Math.cos(-1.045 +i*Split*Math.PI/180)
 }
for (i=0; i < S.length; i++){
 document.layers["nx"+i].top=Ypos+i*Ybase/4.1*Math.sin(sec);
 document.layers["nx"+i].left=Xpos+i*Xbase/4.1*Math.cos(sec);
 }
for (i=0; i < M.length; i++){
 document.layers["ny"+i].top=Ypos+i*Ybase/4.1*Math.sin(min);
 document.layers["ny"+i].left=Xpos+i*Xbase/4.1*Math.cos(min);
 }
for (i=0; i < H.length; i++){
 document.layers["nz"+i].top=Ypos+i*Ybase/4.1*Math.sin(hrs);
 document.layers["nz"+i].left=Xpos+i*Xbase/4.1*Math.cos(hrs);
 }
}

else if (iecompattest().clientWidth){
Ypos=iecompattest().scrollTop+iecompattest().clientHeight-Ybase-25;
Xpos=iecompattest().scrollLeft+iecompattest().clientWidth-Xbase-20;
ieClock.style.top=iecompattest().scrollTop+iecompattest().clientHeight-Ybase*2-55-Ybase/20+'px';
ieClock.style.left=Math.min(iecompattest().scrollLeft+iecompattest().clientWidth-ieClock.offsetWidth,iecompattest().scrollLeft+iecompattest().clientWidth-Xbase-25-ieClock.offsetWidth/2)+'px';
ieClock.innerHTML=dt+' '+day+' '+ampm;
for (var i=0; i < dots; ++i){
 ieDigits[i].style.pixelTop=Ypos-15+Ybase*Math.sin(-1.045 +i *Split*Math.PI/180)
 ieDigits[i].style.pixelLeft=Xpos-15+Xbase*Math.cos(-1.045 +i *Split*Math.PI/180)
 }
for (i=0; i < S.length; i++){
 x[i].style.pixelTop =Ypos+i*Ybase/4.1*Math.sin(sec);
 x[i].style.pixelLeft=Xpos+i*Xbase/4.1*Math.cos(sec);
 }
for (i=0; i < M.length; i++){
 y[i].style.pixelTop =Ypos+i*Ybase/4.1*Math.sin(min);
 y[i].style.pixelLeft=Xpos+i*Xbase/4.1*Math.cos(min);
 }
for (i=0; i < H.length; i++){
 z[i].style.pixelTop =Ypos+i*Ybase/4.1*Math.sin(hrs);
 z[i].style.pixelLeft=Xpos+i*Xbase/4.1*Math.cos(hrs);
 }
}
setTimeout(function(){clock();},30);
}
clock.running=0;
clock();
}
analog_clock();

</script>
</body>
</html>

**wynn** · 01-31-2007, 05:41 PM

thanks again.. problem solved... XD ^__^

edit: sorry for being in demand. XD
umm.. the clock is small.. even if the font size ahs been changed... whats wrong?.
and.. aah. where can i edit the characters i can place above the clock.. XD

Thread: analog clock to gmt-8

Thread Tools

Search Thread

analog clock to gmt-8

Bookmarks

Bookmarks

Posting Permissions