Daily web design tips

Wednesday, February 01, 2006

Display the time

A useful feature for any website is displaying the correct time, no matter where the website is being look at in the world. To add this feature to your website you need some simple code called JavaScript [Define]. The ticking time will be displayed like this…

Display time example (Click to open new window)

JavaScript code to add time

Simply copy and paste the below JavaScript code into the HTML [Define] of the web page you want to display the time.

____________________________________________

<div id=Clock> </div>
<!--Important keep this div or the time will not be displayed -->
<script language =" JavaScript">

function tick() {
var hours, minutes, seconds, ap;
var intHours, intMinutes, intSeconds;
var today;

today = new Date();

intHours = today.getHours();
intMinutes = today.getMinutes();
intSeconds = today.getSeconds();

switch(intHours){
case 0:
intHours = 12;
hours = intHours+":";
ap = "A.M.";
break;
case 12:
hours = intHours+":";
ap = "P.M.";
break;
case 24:
intHours = 12;
hours = intHours + ":";
ap = "A.M.";
break;
default:
if (intHours > 12)
{
intHours = intHours - 12;
hours = intHours + ":";
ap = "P.M.";
break;
}
if(intHours < 12)
{
hours = intHours + ":";
ap = "A.M.";
}
}


if (intMinutes < 10) {
minutes = "0"+intMinutes+":";
} else {
minutes = intMinutes+":";
}

if (intSeconds < 10) {
seconds = "0"+intSeconds+" ";
} else {
seconds = intSeconds+" ";
}

timeString = hours+minutes+seconds+ap;

Clock.innerHTML = timeString;

window.setTimeout("tick();", 100);
}

window.onload = tick;

</script>
____________________________________________

That’s it. Save the web page and then view it to check it works correctly.

More ways to improve your website

0 Comments:

Post a Comment

<< Home