Converting 24-Hour to 12-Hour Time

JavaScript provides the time in 24-hour format, also known as military time. Many people are unfamiliar or uncomfortable with this format, so you’ll want to know how to convert it to 12-hour format. In the next two scripts, you see one way to go about the task, which needs a bit of explanation. Our page (Script 12.6) has two important elements: an h2 tag and a form. The script will write the time into the former. The latter contains two radio buttons, which let us switch the time from 24-hour format into 12-hour format. The JavaScript behind this is in Script 12.7. The result is shown in Figure 12.5.

Figure 12.5. The script in action.


Script 12.6. This HTML uses ids to identify each radio button.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
     <title>JavaScript Clock</title>
     <script type="text/javascript" src="script05.js"></script>
</head>
<body bgcolor="#FFFFFF">
<div align="center">
     <h2 id="showTime"> </h2>
     <form action="#">
        Display 24-hour Clock?
        <input type="radio" name="timeClock" id="show24" checked="checked" /><label for="show24">Yes</label> &nbsp;&nbsp;
        <input type="radio" name="timeClock" id="show12" /><label for="show12">No</label>
     </form>
</div>
</body>
</html>

To convert 24-hour to 12-hour time:

1. 
document.getElementById
("showTime").innerHTML = showTheHours(now.getHours()) + showZeroFilled(now.getMinutes()) + showZeroFilled(now.getSeconds()) + showAmPm();



As in the previous task, this may look daunting, but all it is doing is building the time value displayed on the page by concatenating the result of the other functions (covered below). The result gets put into the innerHTML property of showTime.

2. 
setTimeout(showTheTime,1000);



This bit of code tells the display to update every second.

3. 
function showTheHours(theHour) {



Next, set up a function called showTheHours, containing the variable theHour.

4. 
if (show24Hour() || (theHour > 0 && theHour < 13)) {
  return theHour;
}
if (theHour == 0) {
  return 12;
}
return theHour-12;



These conditionals say that if the user wants to show 24-hour time, or if the result of the hour portion of the time is greater than zero but less than 13, then simply return the variable theHour. Remember that the || operator means a logical or, as you first saw in Chapter 1. Otherwise, if theHour is zero, then return with the result 12 (when the hour is 12 A.M.); otherwise return theHour minus 12 (which converts hours 13 and higher to their 12-hour counterparts).

5. 
function show24Hour() {
  return (document.getElementById("show24").checked);



This function returns a value based on which radio button on the page the user has checked. If show24 is selected, then it should return a true result; otherwise it returns a false result.

6. 
if (show24Hour()) {
   return "";
}
if ((now.getHours() < 12)) {
   return " AM";
}
return " PM";



The showAmPm() function adds the AM or PM to the 12-hour time. If the function show24Hour is true, it returns nothing, and goes to the next function. If the hours portion of the now variable is less than 12, then the value of the function is AM; otherwise it is PM. Again, there is a leading space in the AM or PM text string, so things look nice.

Script 12.7. This script converts between 24-hour and 12-hour time.
window.onload = showTheTime;

function showTheTime() {
     var now = new Date();

     document.getElementById("showTime").innerHTML = showTheHours(now.getHours()) +  showZeroFilled(now.getMinutes()) +  showZeroFilled(now.getSeconds()) + showAmPm();
					setTimeout(showTheTime,1000);
					function showTheHours(theHour) {
					if (show24Hour() || (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 show24Hour() {
					return (document.getElementById("show24").checked);
					}

     function showAmPm() {
        if (show24Hour()) {
					return "";
					}
					if ((now.getHours() < 12)) {
					return " AM";
					}
					return " PM";
     }
}

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.145.130.227