我的编程空间,编程开发者的网络收藏夹
学习永远不晚

Javascript中如何使用Date对象

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

Javascript中如何使用Date对象

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();

   

    let leftTime = (end - now) / 1000;

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

    if (leftTime >= 0) {

      //Math.floor(向下取整)

     

      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-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 class="lazy" data-src="moment.js"></script>

<script>

    moment().format();

</script>

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

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

Javascript中如何使用Date对象

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

javascript内置对象Date怎么使用

这篇文章主要讲解了“javascript内置对象Date怎么使用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“javascript内置对象Date怎么使用”吧!Date的基本使用内置对象Da
2023-06-29

javascript中的History对象如何使用

这篇文章主要介绍“javascript中的History对象如何使用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“javascript中的History对象如何使用”文章能帮助大家解决问题。leng
2023-06-17

java如何创建date对象

Java中可以使用以下几种方法来创建Date对象:1. 使用无参构造函数创建一个表示当前日期和时间的Date对象:```javaDate date = new Date();```2. 使用指定的毫秒数创建一个Date对象,该毫秒数表示从1
2023-09-13

编程热搜

目录