JS实现12小时制和24小时制的转换

2012/11/5 12:34:13作者：佚名来源：网络

移动端

【实例名称】

JS实现12小时制和24小时制的转换

【实例描述】

表示时间的方式有24小时制和12小时制。如果是12小时制的时间，通常显示“上午”或“下午”。本例学习如何实现小时制间的转换。

【实例代码】

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>标题页-学无忧（www.xue51.com）</title>
<SCRIPT LANGUAGE="JavaScript">
function timeType() {
    if (document.form.showTimeType[0].checked) { 
//判断选择的是哪个类型-24小时就返回true
    return true;
}
return false;
}
function showTheHours(theHour) {
    if (timeType() || (theHour > 0 && theHour < 13)) {
//如果时间在12小时内
    return (theHour);
    }
    if (theHour == 0) {                              
//如果时间等于0
        return (12);
    }
    return (theHour-12);                            
 //如果时间大于12，需要减去12-针对12小时制
}
function showZeroFilled(inValue) {
    if (inValue > 9) {                             
 //设置分钟数的两位数显示，不足两位补0
    return "" + inValue;
    }
    return "0" + inValue;
    }
    function showAmPm() {                          
//显示上午或下午的方法
    if (timeType()) {
    return ("");
    }
    if (now.getHours() < 12) {  
//判断日期，显示12小时制的中文提示
    return (" 上午");
    }
    return (" 下午");
}
function showTheTime() {    
//显示时间的方法
    now = new Date          
//获取当前时间
    document.form.showTime.value = showTheHours(now.getHours()) 
+ ":" + showZeroFilled(now.getMinutes()) + ":" + 
showZeroFilled(now.getSeconds()) + showAmPm()
    setTimeout("showTheTime()",1000)  
//每隔1秒更新时间
}
</script>
</head>
<BODY onLoad="showTheTime()">
<center><form name=form>
<input type=text name=showTime size=11><p>
<input type=radio name=showTimeType checked>24小时<br>
<input type=radio name=showTimeType>12小时<br>
</form></center></body>
</html>

【运行效果】

12小时制和24小时制的转换运行效果

【难点剖析】

本例的难点是12小时制日期的显示问题。默认的显示时间是24小时制，如果显示12小时制，需要判断时间是否在12小时内，如果小于12小时，只需要原样显示时间，同时为时问添加“上午”标识；如果大于12小时，则需要减去12，并添加“下午”标识。

【源码下载】

为了JS代码的准确性，请点击：12小时制和24小时制的转换进行本实例源码下载

标签：

上一篇：pagefile.sys是什么文件，可以删除吗
下一篇：PS调色技巧：调出美女图片暗调蓝红色

热门软件/ 推荐游戏/ 手机软件

JS实现12小时制和24小时制的转换

资讯分类

推荐教程

精品软件推荐