Helvetica Bold Clock – Javascript and PHP

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.

This entry was posted in Blog, Feature, General, Tutorials and tagged , , , , , , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

Leave a Reply