JavaScript Program to show Clock Type

This is a really neat little script that can display the current time in “Military Time” or “12 Hour Time” with the push of a button. Give it a try, it’s neat!

Many people confuse about JavaScript array [] and object {}, so this tutorial will explain the difference in between JavaScript {} and []

<!-- 
THREE STEPS TO INSTALL CLOCK TYPE: 
1. Paste the first code in the HEAD of your HTML document 
2. Copy the onLoad event handler into the BODY tag 
3. Add the last code in the BODY of your HTML document 
-->

<!-- STEP ONE: Paste the first code in the HEAD of your HTML document -->

&nbsp;

<script language="JavaScript">

<!--Total Java Scripts 99 - Next Step Software-->

<!-- Begin 

function showMilitaryTime() { 
	if (document.form.showMilitary[0].checked) 
	{ 
		return true; 
	} 
	return false; 
} 

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

function showZeroFilled(inValue) { 
	if (inValue > 9) {
		return "" + inValue;
	}
	return "0" + inValue;
}

function showAmPm() {
	if (showMilitaryTime()) {
		return ("");
	}
	if (now.getHours() < 12) { 
		return (" am"); 
	} 
	return (" pm"); 
} 

function showTheTime() { 
	now = new Date();
	
	document.form.showTime.value = showTheHours(now.getHours()) + ":" + showZeroFilled(now.getMinutes()) + ":" + showZeroFilled(now.getSeconds()); 
	
	showAmPm();			
} 

setTimeout("showTheTime()",100);


// End -->
</script>

&nbsp;

<!-- STEP THREE: Add the last code in the BODY of your HTML document -->

&nbsp;

&nbsp;

<form name="form">
	<input name="showTime" size="11" type="text" />
	<input checked="checked" name="showMilitary" type="radio" />Military Time
	<input name="showMilitary" type="radio" />12 Hour Time
</form>&nbsp;

<!-- Script Size: 1.56 KB -->

<!--

THREE STEPS TO INSTALL CLOCK TYPE:

1. Paste the first code in the HEAD of your HTML document

2. Copy the onLoad event handler into the BODY tag

3. Add the last code in the BODY of your HTML document

-->

<!-- Begin

function showMilitaryTime() {

if (document.form.showMilitary[0].checked)

{

return true;

}

return false;

}

function showTheHours(theHour) {

if (showMilitaryTime() || (theHour > 0 && theHour < 13)) {

return (theHour);

}

if (theHour == 0) {

return (12);

}

return (theHour-12);

}

function showZeroFilled(inValue) {

if (inValue > 9) {

return "" + inValue;

}

return "0" + inValue;

}

function showAmPm() {

if (showMilitaryTime()) {

return ("");

}

if (now.getHours() < 12) {

return (" am");

}

return (" pm");

}

function showTheTime() {

now = new Date();

document.form.showTime.value = showTheHours(now.getHours()) + ":" + showZeroFilled(now.getMinutes()) + ":" + showZeroFilled(now.getSeconds());

showAmPm();

}

setTimeout("showTheTime()",100);

// End -->

</script>

<input checked="checked" name="showMilitary" type="radio" />Military Time

<input name="showMilitary" type="radio" />12 Hour Time

</form> 

About The Author

M. Saqib

JavaScript Program to show Clock Type

About The Author

M. Saqib

Related Posts

JavaScript Program to show Date and Time Stamp

JavaScript Code to show Browser Information

Current date and time (long)

Difference Between [] and {} – JavaScript