Posted by & filed under Blog, Feature, General, Tutorials.

I am learning PHP so made this clock/time website page using Javascript for the time and PHP to get the date. The Javascript is from w3schools.com but I wrote the PHP. Here is the Javascript for the clock – this goes in the head tag

<script type="text/javascript">// <![CDATA[
function startTime()
{
var today=new Date();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
// add a zero in front of numbers<10
m=checkTime(m);
s=checkTime(s);
document.getElementById('clock').innerHTML=h+":"+m+"."+s;
t=setTimeout('startTime()',500);
}

function checkTime(i)
{
if (i<10)   {   i="0" + i;   } return i; } // ]]></script>

You then need to put this in the start body tag, so that it loads the script.

 onload="startTime()" 

Here is the PHP to put the date on the page – this goes in the div where you want the date to go

<br />
<div class="datecontainer">
		<?php 		$today = date("l d/m/Y"); 		echo "$today"; 		?>
	</div>
<p>

The Javascript time updates automatically, but the date only changes on a page reload. The bonus is that it produces selectable text, so you can style it in CSS. I used a CSS3 gradient for the background and some light shadow on the text and main area to get the pressed look.

Leave a Reply

  • (will not be published)