Custom Clock

lordtopcat · #1 (**permalink**) 04-30-08, 07:00 PM

Hi Guys,

I want a simple digital clock that I can put on my webpage, the only thing is, I want to be able to configure what timezone it displays, so as everyone who enters the page sees the same time.

Thank you!
LTC

job0107 · #2 (**permalink**) 05-02-08, 07:32 AM

This simple clock gets its time from the clients computer. So no matter where they are in the world, it will show their time.

Javascript Code:

<html>
<head>
<style>
.clock_container
{
 width:100px;
 text-align:center;
 background:#000000;
 border:4px solid #ff0000;
 padding:2px;
 }
.cw
{
 color:#ffff00;
 font-weight:bold;
 }
.pr{padding-right:2px;}
</style>
<script language="javascript">
function simple_clock(){
ourDate = new Date();
var seconds=ourDate.getSeconds();
seconds=seconds+"";
if(seconds.length==1){seconds="0"+seconds;}
var minutes=ourDate.getMinutes();
minutes=minutes+"";
if(minutes.length==1){minutes="0"+minutes;}
var hours=ourDate.getHours()
document.getElementById("hours").innerHTML=hours;
document.getElementById("min").innerHTML=minutes;
document.getElementById("sec").innerHTML=seconds;
}
setInterval("simple_clock()",500);
</script>
</head>
<body>
<div class="clock_container">
 <span id="hours" class="cw pr"></span>
 <span class="cw">:</span>
 <span id="min" class="cw pr"></span>
 <span class="cw">:</span>
 <span id="sec" class="cw"></span>
</div>
</body>
</html>

lordtopcat · #3 (**permalink**) 05-03-08, 05:43 AM

Thanks, but I want to display the same time for EVERYONE. I don't want to get the client's time.

Thank You though

job0107 · #4 (**permalink**) 05-03-08, 06:18 AM

Do you have PHP?

lordtopcat · #5 (**permalink**) 05-04-08, 06:27 AM

Yes. I am currently programming the page I want to display the clock in php.

job0107 · #6 (**permalink**) 05-04-08, 08:21 AM

Ok, You need to files to make this happen.

First the HTML file.

Put this code in your HTML file.

HTML Code:

<html>
<head>
<style>
.clock_container
{
 width:100px;
 text-align:center;
 background:#000000;
 border:4px solid #ff0000;
 padding:2px;
 }
.cw
{
 color:#ffff00;
 font-weight:bold;
 }
.pr{padding-right:2px;}
</style>
<script>
function createRequest()
{
 var xmlhttp = false;
 try {xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");}catch(e){try {xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");}catch(E){xmlhttp = false;}}
 if(!xmlhttp && typeof XMLHttpRequest!='undefined'){try{xmlhttp = new XMLHttpRequest();}catch(e){xmlhttp=false;}}
 if(!xmlhttp && window.createRequest){try{xmlhttp = window.createRequest();}catch(e){xmlhttp=false;}}
 return xmlhttp;
 }
function request_time()
{
 var url = "get_time.php";
 var con=createRequest();
 con.open("GET",url,true);
 con.onreadystatechange=function()
 {
  if(con.readyState==4 && con.status==200)
  {
   temp = con.responseText.split(",");
   document.getElementById("hours").innerHTML=temp[0];
   document.getElementById("min").innerHTML=temp[1];
   document.getElementById("sec").innerHTML=temp[2];
   }
  }
 con.send(null);
 }

</script>
</head>
<body onload="setInterval('request_time()',1000)">
<div class="clock_container">
 <span id="hours" class="cw pr"></span>
 <span class="cw">:</span>
 <span id="min" class="cw pr"></span>
 <span class="cw">:</span>
 <span id="sec" class="cw"></span>
</div>
</body>
</html>

Then the second file is a PHP file.

get_time.php

PHP Code:


			
<?php
$date=date("h");
$date.=",".date("i");
$date.=",".date("s");
echo $date;
?>

Put both files in the same directory and run the HTML file.