根据12和24小时制选择不同的时间显示

<HTML>
<HEAD>
<TITLE>时间日期篇--当前时间</TITLE>
<meta charset="utf-8">
</HEAD>

<BODY bgcolor="#fef4d2" onLoad=showTheCurrentTime()>
    <br>
    <br>
    <center>
        <font color="ffaafa"><h2>时间日期篇--当前时间</h2></font>
        <hr width=300>
        <br>
        <br>

        <!-- 案例代码1开始 -->

        <script type="text/javascript">

function showMilitaryTime() {
if (document.form.showMilitary[0].checked) {
return true;
}
return false;
}
//showTheHours解决小时的问题
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 showTheCurrentTime() {
now = new Date
document.form.showTime.value = showTheHours(now.getHours()) + ":" + showZeroFilled(now.getMinutes()) + ":" + showZeroFilled(now.getSeconds()) + showAmPm()
setTimeout("showTheCurrentTime()",1000)
}
</script>
        <!-- 案例代码1结束 -->


        <!-- 案例代码2开始 -->

        <form name="form">
            <div align="center">
                <center>
                    <p>
                        <font> <!-- [Step1]: 这里可以改变显示列的长度 --> <input type="text"
                            name="showTime" size="11">
                        </font>
                    </p>
                </center>
            </div>
            <div align="center">
                <center>
                    <p>
                        <input type="radio" name="showMilitary" checked> <font
                            color="">24 Hour Time<br> <input type="radio"
                            name="showMilitary"> 12 Hour Time<br>
                        </font>
                    </p>
                </center>
            </div>
        </form>

        <!--案例代码2结束 -->

    </center>
</BODY>

</HTML>

posted @ 2016-05-19 16:30  坚哥威武  阅读(722)  评论(0编辑  收藏  举报