12/24 Hour Clock

 
 

24 Hour Time
12 Hour Time
 
 
Click to start the script.

Put this code into your page:

<html>
<head>

<style>
.text
{
FONT: 10pt arial;
COLOR: black
}
</style>

<SCRIPT LANGUAGE="JavaScript">

function show24HourTime() {
if (document.clock.show24Hour[0].checked) {
return true;
}
return false;
}

function showTheHours(theHour) {
if (show24HourTime() || (theHour > 0 && theHour < 13)) {
if (theHour == "0") theHour = 12;
return (theHour);
}
if (theHour == 0) {
return (12);
}
return (theHour-12);
}

function showZeroFilled(inValue) {
if (inValue > 9) {
return "" + inValue;
}
return "0" + inValue;
}
function showAmPm() {
if (show24HourTime()) {
return ("");
}
if (now.getHours() < 12) {
return (" am");
}
return (" pm");
}

function showTheTime() {
now = new Date
document.clock.showTime.value = showTheHours(now.getHours()) + ":" + showZeroFilled(now.getMinutes()) + ":" + showZeroFilled(now.getSeconds()) + showAmPm()
setTimeout("showTheTime()",1000)
}
</script>

</head>

<BODY onLoad="showTheTime()">

<br><br><br>
<center><form name=clock>
<TABLE width="150" border="0" cellpadding="0" cellspacing="0" bgcolor=#F5F4E0>
<tr>
<td colspan=3><img src=images/spacer.gif height=10></td>
</tr>
<tr>
<td><img src=images/spacer.gif width=10></td>
<td bgcolor=white align=center><br><input type=text name=showTime size=11><p>
<input type=radio name=show24Hour checked><font class=text>24 Hour Time</font><br>
<input type=radio name=show24Hour><font class=text>12 Hour Time</font><br><br></td>
<td><img src=images/spacer.gif width=10></td>
</tr>
<tr>
<td colspan=3><img src=images/spacer.gif height=10></td>
</tr>
</table>
</form>
</center>

</body>
</html>


Related Articles

  • Javascript Clock
    This will create a nice JS clock. You can change the color of it too.
  • Binary Clock
    Hours, minutes and seconds java script clock, with the twist that the time is displayed in binary! An unusual script, that gives a nice twist to the standard java script clock. The only down side is that you need to understand binary to read the time.
  • Time and Date using PHP
    In this tutorial we will learn how to display the day and/or time by using php. Its a very easy thing to do using php (theres only one line of code, thats right, only one!) so, lets get started.
  • Date Function
    Learn how people use the date function in there php coding.
  • Date and Time
    Display the current data and time using a very small and common code.
  • Displaying Date and Time using PHP
    Type exactly like below in Notepad or any other HTML Editor and save it as date.php in your localhost.
  • Minutes Ago
    Grab minutes ago with unix time.
  • Custom Greeting
    In the last tutorial we learned how to display the time using php. Now this is cool and all but lets get even cooler and learn how to put that time to work and display custom greeting depending on the time of day.
  • Displaying Date and Time using PHP
    You dont have to know PHP programming to do this tutorial.
  • Randomizer for ASP
    This article will show you how to create a simple but powerful randomizer.

Contact Web Design Outsource and get started today

Need Website Designing, Development, Redesigning, Maintenance and SEO services or help growing your company's web presence? Request a free Quote Now.

Our Services
Instant Messenger
© 2011 WebDesign Solutions Inc.
Privacy Policy | Terms and Conditions | Sitemap | Links