【Web API DOM10】日期（时间）对象

news2025/1/16 16:11:14

一：实例化

1 获取系统当前时间即创建日期对象

const date = new Date()
console.log(date)

2024年6月5日周三

2 获取指定的时间

以获取2025年6月29日为例

const date = new Date('2025-6-29')
console.log(date)

二：日期对象方法

1 使用场景：

日期对象返回数据如上图，无法直接使用；因此要利用日期对象方法，转化成可以使用的格式

2 具体方法如下：

注：

getDay()中，星期天是数字0，而不是7

getMonth(),获取的月份要加1，才是正常月份显示

3 显示当前时间案例

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div></div>
  <script>
    function getDate() {
      const date = new Date()
      let h = date.getHours()
      let m = date.getMinutes()
      let s = date.getSeconds()
      h = h < 10 ? 0 + h : h
      m = m < 10 ? 0 + m : m
      s = s < 10 ? 0 + s : s
      return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDay()} ${h}:${m}:${s}`
    }
    const div = document.querySelector('div')
    //避免页面刷新，留下的空白
    div.innerHTML = getDate()
    setInterval(function () {
      div.innerHTML = getDate()
    }, 1000)
  </script>
</body>

</html>

三：时间戳

1 什么是时间戳

指1970年01月01日00时00分00秒起至现在的毫秒数，它是一种特殊的计量时间的方式

最典型的应用场景：倒计时计算

2 倒计时算法

将来时间戳-现在时间戳 = 剩余时间毫秒数

剩余时间毫秒数转换为剩余时间的年月日时分秒就是倒计时时间

3 获取时间戳的方式

1 const date = new Date()
date.getTime()
2 +new Date()
//既可以返回当前的时间戳，也可以返回指定时间的时间戳
3 Date.now()
//只能得到当前的时间戳，而且前面两种可以返回指定时间的时间戳

四：案例倒计时效果

案例分析

思路：

倒计时算法

注意点：

1 通过时间戳得到的是毫秒，需要转换为秒在计算

2 转换公式：

d = parseInt(总秒数/60/60/24)//天数

h = parseInt(总秒数/60/60%24)//小时

m = parseInt(总秒数/60%60)//分数

s = parseInt(总秒数%60)//当前秒数

3 setInterval(函数名，秒数)

函数名不加小括号

样式：

代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
    .countdown {
      width: 240px;
      height: 305px;
      text-align: center;
      line-height: 1;
      color: #fff;
      background-color: brown;
      /* background-size: 240px; */
      /* float: left; */
      overflow: hidden;
    }

    .countdown .next {
      font-size: 16px;
      margin: 25px 0 14px;
    }

    .countdown .title {
      font-size: 33px;
    }

    .countdown .tips {
      margin-top: 80px;
      font-size: 23px;
    }

    .countdown small {
      font-size: 17px;
    }

    .countdown .clock {
      width: 142px;
      margin: 18px auto 0;
      overflow: hidden;
    }

    .countdown .clock span,
    .countdown .clock i {
      display: block;
      text-align: center;
      line-height: 34px;
      font-size: 23px;
      float: left;
    }

    .countdown .clock span {
      width: 34px;
      height: 34px;
      border-radius: 2px;
      background-color: #303430;
    }

    .countdown .clock i {
      width: 20px;
      font-style: normal;
    }
  </style>
</head>

<body>
  <div class="countdown">
    <p class="next">今天是2222年2月22日</p>
    <p class="title">下班倒计时</p>
    <p class="clock">
      <span id="hour">00</span>
      <i>:</i>
      <span id="minutes">25</span>
      <i>:</i>
      <span id="second">20</span>
    </p>
    <p class="tips">18:30:00下课</p>
  </div>
  <script>

    function getTime() {
      //得到当前时间戳
      const now = +new Date()
      //得到将来时间戳
      const future = +new Date("2024-6-5 21:00:00")
      // console.log(now, future);
      const sy = (future - now) / 1000
      let h = parseInt(sy / 60 / 60 % 24)//小时

      let m = parseInt(sy / 60 % 60)//分数

      let s = parseInt(sy % 60)//当前秒数
      h = h >= 10 ? h : '0' + h
      m = m >= 10 ? m : '0' + m
      s = s >= 10 ? s : '0' + s
      document.querySelector('#hour').innerHTML = h
      document.querySelector('#minutes').innerHTML = m
      document.querySelector('#second').innerHTML = s
    }
    //避免页面存在数字影响
    getTime()
    //定时器中函数不加小括号，只写函数名
    setInterval(getTime, 1000)
  </script>
</body>

</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1790897.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！