怎样通过js输出格式化时间

今天要写一个页面时间功能，把时间按照 “YYYY年MM月DD日 HH:MM:SS”的格式显示。在网上搜了一圈，没有找到既简单又好用的js输出格式化时间的办法。找到的方案要么太笨重，要么显示格式不是我想要的。于是在获取的一个方案基础上做了升级，达到了最终目的。下面我来说说具体是怎么做的吧：

 

首先，我获得代码是这样的：

<script>
function show(){
var date = new Date(); //日期对象
var now = "";
now = date.getFullYear()+"年"; //读英文就行了
now = now + (date.getMonth()+1)+"月"; //取月的时候取的是当前月-1如果想取当前月+1就可以了
now = now + date.getDate()+"日";
now = now + date.getHours()+"时";
now = now + date.getMinutes()+"分";
now = now + date.getSeconds()+"秒";
document.getElementById("nowDiv").innerHTML = now; //div的html是now这个字符串
setTimeout("show()",1000); //设置过1000毫秒就是1秒，调用show方法
}
</script>
<body onload="show()"> <!-- 网页加载时调用一次 以后就自动调用了-->
<div id="nowDiv"></div>
</body>

 

 

　　代码还算比较简单，通过date对象获取系统时间，alert一下就可以看到date()对象获得的时间格式，如下图所示：

 

再通过 getFullYear() 、getMonth()、getDate()、getHours()、getMinutes()、getSeconds()分别获取年月日时分秒。使用getMonth()时需要注意，获取的月份是0-11，比当前的实际月份小1，因此在显示时需要+1还原。然后利用setTimeout函数每间隔1秒钟调用show函数一次即可以实现页面上的钟表走动。

但是这个方法有一个缺点，显示的时间格式并非严格的“YYYY年MM月DD日 HH:MM:SS”，当月日时分秒不足两位时，他不会自动在十位补零。

所以我在输出月日时分秒的时候增加一次判断和转化，代码如下：

date.getDate()< 10 ? ('0' + date.getDate()):date.getDate()

判断获取的时间是否小于10，如果小于10自动在前面补零，否则原样输出。

所以改进之后的代码整体如下：

 

<script type="text/javascript">
        function show(){
            var date = new Date(); //日期对象
            var now = "";
            now = date.getFullYear()+"年"; //读英文就行了
            now = now + ( (date.getMonth()+1)< 10? ('0' + (date.getMonth()+1)):(date.getMonth()+1) ) +"月"; //取月的时候取的是当前月-1如果想取当前月+1就可以了
            now = now + ( date.getDate()< 10 ? ('0' + date.getDate()):date.getDate() ) +"日";
            now = now + '&nbsp;' + ( date.getHours()< 10 ? ('0' + date.getHours()):date.getHours() )+":";
            now = now + ( date.getMinutes()< 10 ? ('0' + date.getMinutes()):date.getMinutes() )+":";
            now = now + ( date.getSeconds()< 10 ? ('0' + date.getSeconds()):date.getSeconds() );
            document.getElementById("nowDiv").innerHTML = now; //div的html是now这个字符串
            setTimeout("show()",1000); //设置过1000毫秒就是1秒，调用show方法
        }
</script>
<body onload="show()"> <!-- 网页加载时调用一次 以后就自动调用了-->
<div id="nowDiv"></div>
</body>

最后，显示的效果如下：

完美实现了时间的格式化显示。

如果希望调整时间的显示格式，只需要对上面代码中的输出样式稍加调整就可以。

总的来说还是比较方便实用的。

 =======================================================

忘记了一个重要的格式，那就是星期的显示，在文章再补充一下星期的显示方法。

date对象提供了一个获取当前星期的函数getDay()，得到的结果是0-6的整数，其中0表示周日，6表示周六。说句题外话，老外一直都是把周日当作一周的开始的，他们把这天当作敬拜神的日子，所以星期几也叫礼拜几，就是从这来的。

回到正题，怎样显示星期几呢？

只要加上下面着两行代码就可以了

var day = ['日','一','二','三','四','五','六'];
now = now + '&nbsp;' + '星期' + day[date.getDay()];

 

 先定义一个day数组，注意数组内元素的顺序不能乱动，然后利用getDay()获取这个数组的对应元素就OK了。

 

 

 

 

 

 

posted @ 2012-09-08 22:35  ChrisV  阅读(1801)  评论(2)  编辑  收藏  举报