Date对象

演讲者:交互开发课题组

内容提纲

  1. Date对象概述
  2. Date对象方法
  3. 时间操作
  4. 案例练习

Date对象概述

  • 日期对象用于处理日期和时间。
  • 时间范围是1970年1月1日00:00:00前后的各1亿天(单位为毫秒)。
  • 参考资料

Date对象方法

  • 构造方法
  • 静态方法
  • 实例方法
    • get方法
    • set方法
    • to方法

Date对象构造方法

  • 不带参数,返回当前时间
  • 数字做参数,返回自1970年1月1日00:00:00开始计算的毫秒数的时间
  • 日期字符串作为参数,返回所对应的时间
  • 多个整数作为参数,依次表示年、月、日、小时、分钟、秒和毫秒
<script type="text/javascript">
    //不带参数,返回当前时间
    var today = new Date();

    //数字做参数,返回自1970年1月1日00:00:00开始计算的毫秒数的时间
    // 1970年1月2日的零时
    var Jan02_1970 = new Date(3600 * 24 * 1000);
    // 1969年12月31日的零时
    var Dec31_1969 = new Date(-3600 * 24 * 1000);

    //日期字符串作为参数,返回所对应的时间
    //日期字符串的完整格式是“month day, year hours:minutes:seconds”
    new Date('October 10, 2017');
    new Date('2017-10-10')
    new Date('2017/10/10')
    new Date('10/10/2017')
    new Date('2017-Oct-15')
    new Date('Oct, 10, 2017')
    new Date('October 10, 2017')
    new Date('2017 Oct 10')

    //多个整数作为参数,依次表示年、月、日、小时、分钟、秒和毫秒
    new Date(2017,10,10,9,40,20,567);
</script>

Date对象的静态方法

  • Date.now()
    • 返回当前距离1970年1月1日 00:00:00 UTC的毫秒数
  • Date.parse()
    • 解析日期字符串,返回距离1970年1月1日 00:00:00的毫秒数
  • Date.UTC()
    • 默认情况下,Date对象返回的都是当前时区的时间。Date.UTC方法可以返回UTC时间(世界标准时间)。

Date对象的实例方法

  • get类:获取Date对象的日期和时间。
  • set类:设置Date对象的日期和时间。
  • to类:从Date对象返回一个字符串,表示指定的时间。

get方法

  • getTime():返回距离1970年1月1日00:00:00的毫秒数,等同于valueOf方法。
  • getDate():返回实例对象对应每个月的几号(从1开始)。
  • getDay():返回星期几,星期日为0,星期一为1,以此类推。
  • getYear():返回距离1900的年数。
  • getFullYear():返回四位的年份。
  • getMonth():返回月份(0表示1月,11表示12月)。
  • getHours():返回小时(0-23)。
  • getMilliseconds():返回毫秒(0-999)。
  • getMinutes():返回分钟(0-59)。
  • getSeconds():返回秒(0-59)。
  • getTimezoneOffset():返回当前时间与UTC的时区差异,以分钟表示,返回结果考虑到了夏令时因素。

所有这些get*方法返回的都是整数,又稍有不同

Date对象提供了上述方法的UTC版本,用来返回UTC时间

set类和to类

  • set类
  • to类

时间操作

  • 时间格式化
  • 时间差运算
  • 倒计时效果
  • 时钟效果

案例练习

数字时钟效果

案例练习

模拟时钟效果

交互开发

旨为前端开发工程师的前端开发课程