Working with Operators and Expressions - HTML, CSS, and Dynamic HTML - page 803

◗

3. Change the return statement as follows to modify the text string returned by the
function so that it displays the ampm value at the end of the text string:

return thisHour + “:” + thisMinute + “:” + thisSecond + ampm;

Figure 11-31 shows the revised code in the showTime() function.

Figure 11-31 changing the thishour variable to 12-hour format

◗

4. Save your changes to the file.

◗

5. Reload or refresh clock.htm in your Web browser. The revised clock displays time
in 12-hour format. See Figure 11-32.

Figure 11-32 revised current time format

time displayed in
12-hour f o rmat

suffix indicating
whether the time
is a.m. or p.m.

altafulla/Shutterstock.com; jbdphotography/Shutterstock.com

The time value should display minutes and seconds values with a leading zero if they are less
than 10. For your sample date and time, Hector wants the clock to display 2:35:05 p.m. ,
not 2:35:5 p.m. You can make this change by adding another conditional operator to the
showTime() function. With this final modification, the statement to change the displayed
value of the thisMinute variable becomes the following:

thisMinute = thisMinute < 10 ? “0” + thisMinute : thisMinute;
Notice that you enclose the value 0 in quotes, which causes JavaScript to treat the 0
as a text string rather than a numeric value. Also, if the value of the thisMinute vari-
able is not less than 10, you leave it unchanged. The code to change the display of the
thisSecond variable is similar:

thisSecond = thisSecond < 10 ? “0” + thisSecond : thisSecond;