怎样通过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 + ' ' + ( 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 + ' ' + '星期' + day[date.getDay()];
先定义一个day数组,注意数组内元素的顺序不能乱动,然后利用getDay()获取这个数组的对应元素就OK了。
虽然意淫无罪,
也别总打飞机;
说了再多屁话,
真干才是牛逼。
淘爱网是互联网上最专业的礼品推荐导购平台和创意产品资讯发布平台。在这里,你可以找到最新鲜、最有爱的生日|节日礼物和最时尚、最潮流的用心爱物。