【译】用javascript格式化时间和日期的10种方法

原文地址：链接 javascript内置了Date对象支持生成时间和日期，利用Date对象的各种方法能够返回各种与时间和日期相关的值。 在使用日期和时间之间，我们先声明一个变量，并用new运算符和Date()构造函数给它赋值。new运算符和Date()构造函数的主要功能就是创建一个date对象并将它存储在变量中，代码如下： [php] var d=new Date(); [/php] 因此，变量d中便储存了一个date对象。我们现在可以使用这个对象的各种方法了。
  1. 格式1：date-month-year 以下是我们将要使用的方法：
    • getDate();
    • getMonth();
    • getFullYear();
    代码如下： [php] <script type="text/javascript"> <!-- var d = new Date(); var curr_date = d.getDate(); var curr_month = d.getMonth(); var curr_year = d.getFullYear(); document.write(curr_date + "-" + curr_month + "-" + curr_year); //--> </script> [/php] 输出为：
    
上面的代码中，我们为日、月、年各定义了一个变量。这些变量都包含一个数值型的值。（你可以用typeof()确认一下试试:)）。因此，你可以对它们使用任何一种数值型运算符。

细心的同学应该发现了上面的getMonth()返回的月份比实际月份小一个月，这是因为返回的月份是从零开始计算的，即0代表一月，1代表二月…
所以我们应该要给返回的月份加1，正确的代码如下所示:
[php]
<script type="text/javascript">
<!--
var d = new Date();
var curr_date = d.getDate();
var curr_month = d.getMonth();
curr_month++;
var curr_year = d.getFullYear();
document.write(curr_date + "-" + curr_month + "-" + curr_year);
//-->
</script>
[/php]
输出为：
    

    2. 

  2. 格式二：month/day/year
这和上面的方法几乎一模一样，如下所示：
[php]
<script type="text/javascript">
<!--
var d = new Date();
var curr_date = d.getDate();
var curr_month = d.getMonth();
curr_month++;
var curr_year = d.getFullYear();
document.write(curr_month + "/" + curr_date + "/" + curr_year);
//-->
</script>
[/php]
输出为：
    

    

    3. 

  3. 格式三：date-month name-year(比如：27-March-2013)
getMonth()函数以数值的形式将月份返回给我们，为了将这个值转换wie月份名，我们将创建一个数组，里面包含12个月份的名字。代码如下：
[php]
<script type="text/javascript">
<!--
var 
m_names = new Array("January", "February", "March", "April", "May","June","July","August","September","October", "November", "December");

var d = new Date();
var curr_date = d.getDate();
var curr_month = d.getMonth();
var curr_year = d.getFullYear();
document.write(curr_date + "-" + m_names[curr_month] 
+ "-" + curr_year);

/* The last two lines above have 
to placed on a single line */

//-->
</script>
[/php]
注意:为了代码的可读性，我将数组中的代码写成了多行。在实际项目中，你应该把它们写在一行。
这一次，我们实用new操作符和array()构造函数，将十二月份的名字存储在数组中。变量m_names中存储着月份名的数组。
getMonth()返回的值正是存储着月份名的数组的索引值，javascript中数组的索引值也是从0开始，所以我们不必要再去为getMonth()的返回值加1了。
输出为：

    


    

    4. 

  4. 格式四：类似 21st March 2001
这种格式我们为日期包含一个上标，思路是确定日期然后基于日期值确定相应的上标。代码如下：
[php]
<script type="text/javascript">
<!--

var m_names = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");

var d = new Date();
var curr_date = d.getDate();
var sup = "";
if (curr_date == 1 || curr_date == 21 || curr_date ==31)
   {
   sup = "st";
   }
else if (curr_date == 2 || curr_date == 22)
   {
   sup = "nd";
   }
else if (curr_date == 3 || curr_date == 23)
   {
   sup = "rd";
   }
else
   {
   sup = "th";
   }

var curr_month = d.getMonth();
var curr_year = d.getFullYear();

document.write(curr_date + "<SUP>" + sup + "</SUP> " + m_names[curr_month] + " " + curr_year);
//-->
</script>
[/php]
我们先初始化了一个包含上标值的变量sup，使用if-else-if条件语句，我们可以确认当前的日期值并据此分配相应的sup值。
输出为：
    

    

  5. 
格式5. date month name year(例如：Wednesday 21st March 2013)
getDay()方法会返回一个能够确定日期是星期几的数字，0代表星期日（sunday），1代表星期一，依次类推。这次我们将再次用到数组，用来包含星期名。代码如下：[php]
<script type="text/javascript">
<!--

var d_names = new Array("Sunday", "Monday", "Tuesday","Wednesday", "Thursday", "Friday", "Saturday");

var m_names = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September","October", "November", "December");

var d = new Date();
var curr_day = d.getDay();
var curr_date = d.getDate();
var sup = "";
if (curr_date == 1 || curr_date == 21 || curr_date ==31)
   {
   sup = "st";
   }
else if (curr_date == 2 || curr_date == 22)
   {
   sup = "nd";
   }
else if (curr_date == 3 || curr_date == 23)
   {
   sup = "rd";
   }
else
   {
   sup = "th";
   }
var curr_month = d.getMonth();
var curr_year = d.getFullYear();

document.write(d_names[curr_day] + " " + curr_date + "<SUP>"+ sup + "</SUP> " + m_names[curr_month] + " " + curr_year);

//-->
</script>
[/php]
输出为：
    

    6. 

  6. 格式6：小时：分钟
我们可以通过日期对象的getHours()和getMinutes()方法获得小时和分钟。getHours()返回0-23之间的值。代码如下：
[php]
<script type="text/javascript">
<!--

var d = new Date();

var curr_hour = d.getHours();
var curr_min = d.getMinutes();

document.write(curr_hour + " : " + curr_min);

//-->
</script>
[/php]
输出为：
    

    
上面的代码存在两个问题。首先，如果小时和分钟返回的是一位数的话，javascript不会自动在前面添加0.因此，05:03输出是5:03.其二，12:00AM则变成了0:00.下面我们将着手解决这两个问题。

    7. 

  7. 格式7：用AM和PM来校正时间
代码如下所示：
[php]
<script type="text/javascript">
<!--

var a_p = "";
var d = new Date();

var curr_hour = d.getHours();

if (curr_hour < 12)
   {
   a_p = "AM";
   }
else
   {
   a_p = "PM";
   }
if (curr_hour == 0)
   {
   curr_hour = 12;
   }
if (curr_hour > 12)
   {
   curr_hour = curr_hour - 12;
   }

var curr_min = d.getMinutes();

document.write(curr_hour + " : " + curr_min + " " + a_p);

//-->
</script>
[/php]
代码实在是非常简单。首先，我们定义一个变量a_p.由curr_hour的值来决定我们是给它赋值AM还是PM。
接下来，我们改变curr_hour的值，如果它的值为0（比如12:40AM），curr_hour的值应该为12.另外，如果curr_hour的值比12大，那么我们应该减去12把它转化为12小时制。
然而，我们任然没有解决单个数字的问题。
输出为：
    

  8. 
格式8：两位数分钟
为了在在单个数字前面加上0，我们首先必须确认getMinute()返回的值是否是单个数字。我们采用的办法是把数值转化为字符串并检测其长度。如果长度为1，那么我们就在它的前面加上0。代码如下：
[php]
<script type="text/javascript">
<!--

var a_p = "";
var d = new Date();
var curr_hour = d.getHours();
if (curr_hour < 12)
   {
   a_p = "AM";
   }
else
   {
   a_p = "PM";
   }
if (curr_hour == 0)
   {
   curr_hour = 12;
   }
if (curr_hour > 12)
   {
   curr_hour = curr_hour - 12;
   }

var curr_min = d.getMinutes();

curr_min = curr_min + "";

if (curr_min.length == 1)
   {
   curr_min = "0" + curr_min;
   }

document.write(curr_hour + " : " + curr_min + " " + a_p);

//-->
</script>
[/php]
javascript是一种松散类型的语言，这意味着变量的数据类型可以轻易的改变。因此，存储数字的那个变量也可以让它存储字符串。
输出为：
    

    9. 

  9. 格式9：使用秒和毫秒
使用getSeconds和getMilliseconds()可以返回秒和毫秒的值。
[php]
<script type="text/javascript">
<!--

var d = new Date();
var curr_hour = d.getHours();
var curr_min = d.getMinutes();

var curr_sec = d.getSeconds();
var curr_msec = d.getMilliseconds();

document.write(curr_hour + ":" + curr_min + ":" 
+ curr_sec + ":" + curr_msec);

//-->
</script>
[/php]
输出为：
    

    10. 

  10. 格式10：GMT时间
以上讨论的所有方法都是从客户端（浏览器）计算时间，javascript同时也提供了我们类似的的、方法获得UTC时间。一下是方法列表：
getUTCDate(): Date
getUTCMonth(): Month
getUTCFullYear(): Year (4 digit)
getUTCDay(): Day
getUTCHours(): Hours
getUTCMinutes(): Minutes
getUTCSeconds(): Seconds
getUTCMilliseconds(): Milliseconds

    11. 


以上即是翻译的全部内容，很简单的一篇翻译，但也花了我好几个小时，这是我第一次完整的翻译一篇英文教程（以前也有尝试过，不过翻译到一半就没有继续下去了，至今仍躺在草稿箱中），肯定有蛮多不足之处，还望不吝指出：）
另外，除了上面的10中格式外，还可以为Date对象扩充一个formate方法，如下例所示[php]
Date.prototype.format = function(format) //author: meizz
{
  var o = {
    "M+" : this.getMonth()+1, //month
    "d+" : this.getDate(),    //day
    "h+" : this.getHours(),   //hour
    "m+" : this.getMinutes(), //minute
    "s+" : this.getSeconds(), //second
    "q+" : Math.floor((this.getMonth()+3)/3),  //quarter
    "S" : this.getMilliseconds() //millisecond
  }

  if(/(y+)/.test(format)) format=format.replace(RegExp.$1,
    (this.getFullYear()+"").substr(4 - RegExp.$1.length));
  for(var k in o)if(new RegExp("("+ k +")").test(format))
    format = format.replace(RegExp.$1,
      RegExp.$1.length==1 ? o[k] :
        ("00"+ o[k]).substr((""+ o[k]).length));
  return format;
}

alert(new Date().format("yyyy-MM-dd"));
alert(new Date("january 12 2008 11:12:30").format("yyyy-MM-dd h:mm:ss"));
[/php]
记得之前看过哪个公司的笔试题是用javascript写一个汉字时钟，借鉴上面的想法就很容易完成啦，代码如下：
[php]
<script>
	window.onload=function(){
		var hour=document.getElementById('hour'),
			min=document.getElementById('min'),
			sec=document.getElementById('sec'),num;
		setInterval(time,1000);

		time();

		function num2str(num){
			var zh_num=new Array('一','二','三','四','五','六','七','八','九','十');
			if(Math.floor(num/10)==0){

				return zh_num[num];

			}else if(num%10==0){
				if(num/10==1){
					return "十";
				}else{
					return zh_num[num/10-1]+"十";
				}				
			}else{
				var tnum=zh_num[Math.floor(num/10-1)],
					snum=zh_num[Math.floor(num%10-1)];
				return tnum+"十"+snum;
			}
		}	
		function time(){	
			var d=new Date();		
				hour.innerHTML=num2str(d.getHours());	
				min.innerHTML= num2str(d.getMinutes());
				sec.innerHTML= num2str(d.getSeconds());
		}
		
}
</script>
[/php]
输出为：







	
	点:
	
	分:
	
	秒




这两个星期效率一直不好，不知道是不是因为没有继续学习新知识。回顾《javascript权威指南》和《javascript高级程序设计》过程中并没有很强的收获感，当然这也很正常，毕竟不是第一次看了，唯一的收获就是一些曾经不是很清楚的概念在脑海里慢慢的清晰了些。






		

		
posted @ 
2013-04-27 15:45 
echoHUST 
阅读(423) 
评论(0) 
编辑 
收藏 
举报