Author Topic: Javascript clock help.  (Read 455 times)

Offline Tribal

  • Level 22
  • *
  • Posts: 256
  • Reputation: +1/-1
    • View Profile
Javascript clock help.
« on: November 09, 2008, 06:19:02 AM »
Good Afternoon,

I am trying to display a javascript clock on my page which has the time being displayed from the server. Now, i do not want to use ajax to request a page just to get the time. So thought i might be able to do it using math. Logically, i thought that if i used the unix timestamp from the server and the unix timestamp from the client machine that i could work out the offset in milliseconds then from there i should be able to workout the time on the server just pure javascript alone.

However, it has all gone tits up. This is what i have so far: (which does not work???

Code: [Select]
<script type="text/javascript">
var baseDate = new Date(); //--- Create base date object
var timeOnServer = <?php echo time(); ?> * 1000; //--- Unix timestamp on server. *1000 because javascript works in miliseconds
var timeOnClient = baseDate.getTime(); //--- Unix timestamp on client machine.
var offset = (timeOnServer - timeOnClient); //--- Difference in miliseconds between client and server
setTimeout("updateTime()",500); //--- Set the clock to check at half second intervals

function updateTime() { //--- Called from the timeout
var newDate = new Date(); //--- Current timestamp
newDate.setTime((newDate.getTime() + offset)); //--- Set time to that on server
//--- Ternary operator to put 0 infront of hours, mins and seconds if they do not have it.
var hours = (newDate.getHours().toString().length == 2) ? newDate.getHours() : "0"+newDate.getHours();
var mins  = (newDate.getMinutes().toString().length == 2) ? newDate.getMinutes() : "0"+newDate.getMinutes();
var secs  = (newDate.getSeconds().toString().length == 2) ? newDate.getSeconds() : "0"+newDate.getSeconds();
document.getElementById('time').innerHTML = hours+":"+mins+":"+secs; //--- Just display the time
document.getElementById('date').innerHTML = newDate.getDay()+"."+newDate.getMonth()+"."+newDate.getYear(); //--- display date
setTimeout("updateTime()",500); //--- Come back around when needed
}
</script>

For some reason which i can not work out, this is displaying the local time on my machine and the date is far out. It is saying the date is "0.10.108".

Can anybody please help me?  ???  ???

Regards,

Tribal

Offline Zeggy

  • Global Moderator
  • Level 35
  • *****
  • Posts: 1,187
  • Reputation: +13/-4
    • View Profile
Re: Javascript clock help.
« Reply #1 on: November 09, 2008, 07:15:07 AM »
getDay is 0 because it's sunday (week starts on sunday, array starts on 0)
getMonth is 10 because it's november (array key starts on 0)
getYear returns the number of years between the time specified and 1900. So it's 108 because 1900+108 = 2008.

So there was nothing wrong with that :)

Offline Tribal

  • Level 22
  • *
  • Posts: 256
  • Reputation: +1/-1
    • View Profile
Re: Javascript clock help.
« Reply #2 on: November 09, 2008, 07:42:06 AM »
Thanks Zeggy. I did not know that about the date. Silly me :(

However, there is something wrong? "this is displaying the local time on my machine". It should be displaying the time on the server =/

 


SimplePortal 2.3.3 © 2008-2010, SimplePortal