JavaScript Program to Show Current Time In Various Formats

This is a small script that can display the current time in "Military Time" format or "12 Hour Time" format with the push of a button. It shows two radio buttons to change the time format and a text box to display the time.

JavaScript Program to Show Current Time

This is a small script that can display the current time in “Military Time” format or “12 Hour Time” format with the push of a button.

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

<!-- STEP ONE: Paste the first code in the HEAD of your HTML document -->
<script language="JavaScript">

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();			
} 

setInterval(showTheTime(),5000);

</script>


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


<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><br>

 

Scroll to Top