JavaScript从入门到精通(微视频精编版)
上QQ阅读APP看书,第一时间看更新

6.2 Date对象

视频讲解

在Web开发过程中,可以使用JavaScript的Date对象(日期对象)来实现对日期和时间的控制。如果想在网页中显示计时时钟,就得重复生成新的Date对象来获取当前计算机的时间。用户可以使用Date对象执行各种使用日期和时间的过程。

6.2.1 创建Date对象

日期对象是对一个对象数据类型求值,该对象主要负责处理与日期和时间有关的数据信息。在使用Date对象前,首先要创建该对象,其创建格式如下:

    dateObj = new Date()
    dateObj = new Date(dateVal)
    dateObj = new Date(year, month, date[, hours[, minutes[, seconds[,ms]]]])

Date对象语法中各参数的说明如表6.3所示。

表6.3 Date对象的参数说明

下面以示例的形式来介绍如何创建日期对象。

例如,输出当前的日期和时间。代码如下:

    01  var newDate=new Date();   //创建当前日期对象
    02  document.write(newDate);  //输出当前日期和时间

运行结果为:

    Tue May 9 17:55:03 UTC+0800 2017

例如,用年、月、日(2015-6-20)来创建日期对象。代码如下:

    01  var newDate=new Date(2015,5,20);  //创建指定年月日的日期对象
    02  document.write(newDate);          //输出指定日期和时间

运行结果为:

    Sat Jun 20 00:00:00 UTC+0800 2015

例如,用年、月、日、小时、分钟、秒(2015-6-20 13:12:56)来创建日期对象。代码如下:

    01  var newDate=new Date(2015,5,20,13,12,56);  //创建指定时间的日期对象
    02  document.write(newDate);                   //输出指定日期和时间

运行结果为:

    Sat Jun 20 13:12:56 UTC+0800 2015

例如,以字符串形式创建日期对象(2015-6-20 13:12:56)。代码如下:

    01  var newDate=new Date("Jun 20,2015 13:12:56");  //以字符串形式创建日期对象
    02  document.write(newDate);                       //输出指定日期和时间

运行结果为:

    Sat Jun 20 13:12:56 UTC+0800 2015

例如,以另一种字符串的形式创建日期对象(2015-6-20 13:12:56)。代码如下:

    01  var newDate=new Date("2015/06/20 13:12:56");  //以字符串形式创建日期对象
    02  document.write(newDate);                      //输出指定日期和时间

运行结果为:

    Sat Jun 20 13:12:56 UTC+0800 2015
6.2.2 Date对象的属性

Date对象的属性有constructor和prototype。在这里介绍这两个属性的用法。

1.constructor属性

constructor属性可以判断一个对象的类型,该属性引用的是对象的构造函数。

语法如下:

    object.constructor

必选项object是对象实例的名称。

例如,判断当前对象是否为日期对象。代码如下:

    01  var newDate=new Date();            //创建当前日期对象
    02  if (newDate.constructor==Date)     //如果当前对象是日期对象
    03      document.write("日期型对象");  //输出字符串

运行结果为:

    日期型对象
2.prototype属性

prototype属性可以为Date对象添加自定义的属性或方法。

语法如下:

    Date.prototype.name=value

参数说明。

 name:要添加的属性名或方法名。

 value:添加属性的值或执行方法的函数。

例如,用自定义属性来记录当前的年份。代码如下:

    01  var newDate=new Date();                     //创建当前日期对象
    02  Date.prototype.mark=newDate.getFullYear();  //向日期对象中添加属性
    03  document.write(newDate.mark);               //输出新添加的属性的值

运行结果为:

    2018
6.2.3 Date对象的方法

Date对象是JavaScript的一种内部对象。该对象没有可以直接读写的属性,所有对日期和时间的操作都是通过方法完成的。Date对象的方法如表6.4所示。

表6.4 Date对象的方法

说明

UTC是协调世界时(Coordinated Universal Time)的简称,GMT是格林威治时(Greenwich Mean Time)的简称。

注意

应用Date对象中的getMonth()方法获取的值要比系统中实际月份的值小1。

【例6.02】应用Date对象中的方法获取当前的完整年份、月份、日期、星期、小时数、分钟数和秒数,将当前的日期和时间分别连接在一起并输出。程序代码如下:(实例位置:资源包\源码\06\6.02)

    01  var now=new Date();                                               //创建日期对象
    02  var year=now.getFullYear();                                       //获取当前年份
    03  var month=now.getMonth()+1;                                       //获取当前月份
    04  var date=now.getDate();                                           //获取当前日期
    05  var day=now.getDay();                                             //获取当前星期
    06  var week="";                                                      //初始化变量
    07  switch(day){
    08     case 1:                                                        //如果变量day的值为1
    09        week="星期一";                                              //为变量赋值
    10        break;                                                      //退出switch语句
    11     case 2:                                                        //如果变量day的值为2
    12        week="星期二";                                              //为变量赋值
    13        break;                                                      //退出switch语句
    14     case 3:                                                        //如果变量day的值为3
    15        week="星期三";                                              //为变量赋值
    16        break;                                                      //退出switch语句
    17     case 4:                                                        //如果变量day的值为4
    18        week="星期四";                                              //为变量赋值
    19        break;                                                      //退出switch语句
    20     case 5:                                                        //如果变量day的值为5
    21        week="星期五";                                              //为变量赋值
    22        break;                                                      //退出switch语句
    23     case 6:                                                        //如果变量day的值为6
    24        week="星期六";                                              //为变量赋值
    25        break;                                                      //退出switch语句
    26     default:                                                       //默认值
    27        week="星期日";                                              //为变量赋值
    28        break;                                                      //退出switch语句
    29  }
    30  var hour=now.getHours();                                          //获取当前小时数
    31  var minute=now.getMinutes();                                      //获取当前分钟数
    32  var second=now.getSeconds();                                      //获取当前秒数
    33  //为字体设置样式
    34  document.write("<span style='font-size:24px;font-family:楷体;color:#FF9900'>");
    35  document.write("今天是:"+year+"年"+month+"月"+date+"日 "+week);  //输出当前的日期和星期
    36  document.write("<br>现在是:"+hour+":"+minute+":"+second);        //输出当前的时间
    37  document.write("</span>");                                         //输出</span>结束标记

运行结果如图6.2所示。

图6.2 输出当前的日期和时间

应用Date对象的方法除了可以获取日期和时间之外,还可以设置日期和时间。在JavaScript中只要定义了一个日期对象,就可以针对该日期对象的日期部分或时间部分进行设置。示例代码如下:

    01  var myDate=new Date();     //创建当前日期对象
    02  myDate.setFullYear(2012);  //设置完整的年份
    03  myDate.setMonth(5);        //设置月份
    04  myDate.setDate(12);        //设置日期
    05  myDate.setHours(10);       //设置小时
    06  myDate.setMinutes(10);     //设置分钟
    07  myDate.setSeconds(10);     //设置秒钟
    08  document.write(myDate);    //输出日期对象

运行结果为:

    Tue Jun 12 10:10:10 UTC+0800 2012

在脚本编程中可能需要处理许多关于日期的计算,例如计算经过固定天数或星期之后的日期或计算两个日期之间的天数。在这些计算中,JavaScript日期值都是以毫秒为单位的。

【例6.03】应用Date对象中的方法获取当前日期距离明年元旦的天数。程序代码如下:(实例位置:资源包\源码\06\6.03)

    01  var date1=new Date();                       //创建当前的日期对象
    02  var theNextYear=date1.getFullYear()+1;      //获取明年的年份
    03  date1.setFullYear(theNextYear);             //设置日期对象date1中的年份
    04  date1.setMonth(0);                          //设置日期对象date1中的月份
    05  date1.setDate(1);                           //设置日期对象date1中的日期
    06  var date2=new Date();                       //创建当前的日期对象
    07  var date3=date1.getTime()-date2.getTime();  //获取两个日期相差的毫秒数
    08  var days=Math.ceil(date3/(24*60*60*1000));  //将毫秒数转换成天数
    09  alert("今天距离明年元旦还有"+days+"天");    //输出结果

运行结果如图6.3所示。

图6.3 输出当前日期距离明年元旦的天数

在Date对象的方法中还提供了一些以“to”开头的方法,这些方法可以将Date对象转换为不同形式的字符串,示例代码如下:

    01  <h3>将Date对象转换为不同形式的字符串</h3>
    02  <script type="text/javascript">
    03  var newDate=new Date();                         //创建当前日期对象
    04  document.write(newDate.toString()+"<br>");      //将Date对象转换为字符串
    05  document.write(newDate.toTimeString()+"<br>");  //将Date对象的时间部分转换为字符串
    06  document.write(newDate.toDateString()+"<br>");  //将Date对象的日期部分转换为字符串
    07  document.write(newDate.toLocaleString()+"<br>");    //将Date对象转换为本地格式的字符串
    08  //将Date对象的时间部分转换为本地格式的字符串
    09  document.write(newDate.toLocaleTimeString()+"<br>");
    10  //将Date对象的日期部分转换为本地格式的字符串
    11  document.write(newDate.toLocaleDateString());
    12  </script>

运行结果如图6.4所示。

图6.4 将日期对象转换为不同形式的字符串