JavaScript学习之24/12小时制切换

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

HTML&CSS代码：

<style type="text/css">
    .centered {
        text-align:center;
        }
    label {
        padding-right:10px;
        }
</style>
<div class="centered">
    <h2 id="showTime"></h2>
    Display 24-our Clock?
    <input  type="radio" name="timeClock" id="show24" checked="checked"/><label for="show24">Yes</label>
    <input  type="radio" name="timeClock" id="show12" checked="checked"/><label for="show12">No</label>
</div>

JavaScript代码：

<script type="text/javascript">
    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);
        //将几个函数的结果连接起来，构造出要在页面上显示的时间值，然后放入showTime的innerHTML属性。

        function showTheHours(theHour){ //此函数用来显示小时字段
            if(show24Hour() || (theHour > 0 && theHour < 13)){
                return theHour;
            }
 //如果用户希望显示为24小时制，或者时间的小时部分大于0小于13，那么直接返回小时值theHour
            if(theHour==0){
                return 12;
            }
            return theHour-12;
 //大于等于13小于24的theHour减去12
        }

        function  showZeroFilled(inValue){ //此函数为10以下的加0
            if(inValue>9){
                return ":" + inValue;
            }
            return ":0" + inValue;
        }

        function showAmPm(){ //此函数在12小时制后面加上AM或PM。如果show24Hour返回为true，它返回空
            if(show24Hour()){
                return "";
            }
            if(now.getHours()<12){
                return " AM";
            }
            return " PM";
        }
 function show24Hour(){//根据用户在页面上选择的单选按钮返回一个值，若选中show24，返回true。
return document.getElementById("show24").checked;
}
    }
</script>