Javascript中如何使用Date对象

共计 4278 个字符，预计需要花费 11 分钟才能阅读完成。

Javascript 中如何使用 Date 对象，相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。

一、Date 对象是什么

Date 对象用于处理日期和时间，一个日期格式化的对象，

创建一个 Date 对象可以直接使用 new Date()，

括号里可以传入一个时间的格式，就像这样

 new Date(month,dd,yyyy hh:mm:ss

 new Date(yyyy,month,dd hh:mm:ss

 new Date(month,dd,yyyy

 new Date(yyyy,month,dd,hh,mm,ss);

 new Date(yyyy,month,dd);

 new Date(ms);

在这里，我们按 F12 打开控制台 (找到 Console)，然后输入：console.log(new Date()) 它会返回一个当前的时间，如下图所示：

二、Date 对象里的常用方法

在这里可以先 let date = new Date()，然后就可以开始调用 Date 对象中的方法了，这些步骤都可以按 F12 打开控制台进行调试

date.getFullYear()

从 Date 对象以四位数字返回年份

date.getMonth()

从 Date 对象返回月份 (0 ~ 11)

(在这先说明一下，获取当前月份一定要在这个基础上 +1，不然月份就会少一个月)

date.getDay()

从 Date 对象返回一周中的某一天 (0 ~ 6)

date.getDate() 

从 Date 对象返回一个月中的某一天 (1 ~ 31)

date.getHours()

返回 Date 对象的小时 (0 ~ 23)

date.getMinutes()

返回 Date 对象的分钟 (0 ~ 59)

date.getSeconds()

返回 Date 对象的秒数 (0 ~ 59)

date.getMilliseconds()

返回 Date 对象的毫秒 (0 ~ 999)

date.getTime()

返回 1970 年 1 月 1 日至今的毫秒数

有了以上的知识，然后我们就可以开始写一个获取当前时间的函数了

三、获取当前时间的函数

  function currentTime() {

    let date = new Date();

    // 获取年份

    let year = date.getFullYear();

    // 获取月份

    let getMonth = date.getMonth() + 1;

    let month = getMonth 10 ? 0 + getMonth : getMonth;

    // 获取当前日期号

    let day = date.getDate() 10 ? 0 + date.getDate() : date.getDate();

    // 获取小时

    let hour = date.getHours() 10 ? 0 + date.getHours() : date.getHours();

    // 获取分钟

    let minute = date.getMinutes() 10 ? 0 + date.getMinutes() : date.getMinutes();

    // 获取秒数

    let second = date.getSeconds() 10 ? 0 + date.getSeconds() : date.getSeconds();

    // 最后返回一个当前的时间格式

    return `${year}-${month}-${day} ${hour}:${minute}:${second}`

  }

记得在 date.getMonth() 的基础上加回 1 得到准确的月份，在获取月份，日期，小时，分钟，秒数的时候要做下判断，如果它们在 0 到 9 之间，要在前面拼接一个 0，不然时间格式就会像这样：2020/5/19 12:37:5，它并不好看。最后 return 的模板字面量是 ES6 的语法，也可以换成字符串拼接的格式，然后我们就直接调用这个函数 console.log(currentTime())，便可获得这样的一个时间 2020-05-19 12:37:05，当然，里面的时间格式你们可以自行修改，比如 2020/05/19 12:37:05，看你自己个人喜好。

然后我们开始进入正题????

四、开始封装一个日期倒计时的函数

//format 传入一个结束日期的时间

function endTime(format) {

    let date = new Date();

    // 获取当前时间的毫秒数

    let now = date.getTime();

    // 结束日期

    let endDate = new Date(format);

    // 获取结束日期的毫秒数

    let end = endDate.getTime();

    /* 剩余的时间 = 结束的时间 - 当前时间，

    毫秒数再除以 1000 获得秒数 */

    let leftTime = (end – now) / 1000;

    // 如果剩余时间大于 0，开始做判断

    if (leftTime = 0) {

      //Math.floor(向下取整)

      /* 剩余时间的秒数除以 60 得到分钟数，

      再除以 60 得到小时数，

      再除以 24 获得天数 */

      let day = Math.floor(leftTime / 60 / 60 / 24);

      /* 获取小时数要做取余处理，

      不够一天，那么余下的时间就是小时数，

      获取分钟数，秒数也都是同理

      */

      let hour = Math.floor(leftTime / 60 / 60 % 24);

      let minute = Math.floor(leftTime / 60 % 60);

      let second = Math.floor(leftTime % 60);

      // 最后输出的时间格式按喜好转换

      return `${day} 天 ${hour} 小时 ${minute} 分 ${second} 秒 `;

    } else {

      // 时间过了

      alert(时间已过)

    }

  }

至此，你理解了如何封装这两个函数了吗？

五、进行测试 Demo

然后，我们就开始写一个 demo 到网页中，来测试一下我们的成果，此段代码可直接复制到你们的编译器去食用

!DOCTYPE html

html

head

  meta charset= UTF-8

  meta name= viewport content= width=device-width

  title 倒计时 demo /title

  style

    body {

      /* background: url(1.gif) no-repeat; 背景图，可以自行添加 */

      background-size: 100% 100%;

      background-attachment: fixed;

      min-width: 960px;

    }

    .container {

      margin-top: 20px;

      margin-left: 150px;

    }

  /style

/head

body

  div

    div

      h2 /h2

    /div

    h3 /h3

    h3 /h3

  /div

/body

script

  let format = 2020-09-01 00:00:00

  let title = 距离: + format + 还有

  document.querySelector(.title).innerHTML = title

  setInterval(() = {

    document.querySelector(.currentTime).innerHTML = 当前时间: + currentTime();

    document.querySelector(.endTime).innerHTML = endTime(format);

  });

  function currentTime() {

    let date = new Date();

    let year = date.getFullYear();

    let getMonth = date.getMonth() + 1;

    let month = getMonth 10 ? 0 + getMonth : getMonth;

    let day = date.getDate() 10 ? 0 + date.getDate() : date.getDate();

    let hour = date.getHours() 10 ? 0 + date.getHours() : date.getHours();

    let minute = date.getMinutes() 10 ? 0 + date.getMinutes() : date.getMinutes();

    let second = date.getSeconds() 10 ? 0 + date.getSeconds() : date.getSeconds();

    return `${year}-${month}-${day} ${hour}:${minute}:${second}`

  }

  console.log(currentTime())

  function endTime(format) {

    let date = new Date();

    let now = date.getTime();

    let endDate = new Date(format);

    let end = endDate.getTime();

    let leftTime = (end – now) / 1000;

    if (leftTime = 0) {

      let day = Math.floor(leftTime / 60 / 60 / 24);

      let hour = Math.floor(leftTime / 60 / 60 % 24);

      let minute = Math.floor(leftTime / 60 % 60);

      let second = Math.floor(leftTime % 60);

      return `${day} 天 ${hour} 小时 ${minute} 分 ${second} 秒 `;

    } else {

      alert(时间已过)

    }

  }

/script

/html

六、介绍时间类库

一个很好用的 JavaScript 日期处理类库 Moment.js，可以用来处理各种时间样式，附上使用方式

有了这个类库之后就如虎添翼了，让你处理时间更加的简单快捷方便

附上文档地址 http://momentjs.cn/

具体使用方式可参考文档

安装:

npm install moment –save

yarn add moment

浏览器安装:

script src= moment.js /script

script

    moment().format();

/script

看完上述内容，你们掌握 Javascript 中如何使用 Date 对象的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注丸趣 TV 行业资讯频道，感谢各位的阅读！