JavaScript以24小时制提供时间。不过，许多人不喜欢这种格式，希望转换为12小时制。下面的代码给出了一种解决办法。页面中有两个重要元素<h2>标签和单选按钮。脚本将时间写入前者，使用单选按钮进行选择。

HTML&CSS代码：

 
  
  1. <style type="text/css"> 
  2.     .centered { 
  3.         text-align:center; 
  4.         } 
  5.     label { 
  6.         padding-right:10px; 
  7.         } 
  8. </style> 
  9. <div class="centered"> 
  10.     <h2 id="showTime"></h2> 
  11.     Display 24-our Clock? 
  12.     <input  type="radio" name="timeClock" id="show24" checked="checked"/><label for="show24">Yes</label> 
  13.     <input  type="radio" name="timeClock" id="show12" checked="checked"/><label for="show12">No</label> 
  14. </div> 
 
  
 
  
JavaScript代码：
 
  
 
  
  1. <script type="text/javascript"> 
  2.     window.onload = showTheTime; 
  3.     function showTheTime(){ 
  4.         var now = new Date(); 
  5.          
  6.         document.getElementById("showTime").innerHTML = showTheHours(now.getHours())+ 
  7.  showZeroFilled(now.getMinutes())+showZeroFilled(now.getSeconds())+showAmPm(); 
  8.         setTimeout(showTheTime,1000); 
  9.         //将几个函数的结果连接起来，构造出要在页面上显示的时间值，然后放入showTime的innerHTML属性。 
  10.  
  11.         function showTheHours(theHour){ //此函数用来显示小时字段
  12.             if(show24Hour() || (theHour > 0 && theHour < 13)){ 
  13.                 return theHour; 
  14.             } 
  15.  //如果用户希望显示为24小时制，或者时间的小时部分大于0小于13，那么直接返回小时值theHour
  16.             if(theHour==0){ 
  17.                 return 12; 
  18.             } 
  19.             return theHour-12; 
  20.  //大于等于13小于24的theHour减去12
  21.         } 
  22.          
  23.         function  showZeroFilled(inValue){ //此函数为10以下的加0
  24.             if(inValue>9){ 
  25.                 return ":" + inValue; 
  26.             } 
  27.             return ":0" + inValue; 
  28.         } 
  29.          
  30.         function showAmPm(){ //此函数在12小时制后面加上AM或PM。如果show24Hour返回为true，它返回空
  31.             if(show24Hour()){ 
  32.                 return ""; 
  33.             } 
  34.             if(now.getHours()<12){ 
  35.                 return " AM"; 
  36.             } 
  37.             return " PM"; 
  38.         } 
  39.  function show24Hour(){//根据用户在页面上选择的单选按钮返回一个值，若选中show24，返回true。
  40. return document.getElementById("show24").checked;
  41. }
  42.     } 
  43. </script>