JS案例——下班倒计时

且陶陶

发布于 2023-04-12 15:50:06

5.7K0

发布于 2023-04-12 15:50:06

文章被收录于专栏：Triciaの小世界

要求：

使用时间戳和定时器完成一个倒计时案例

效果

分析

设置一个定时器，每隔一秒刷新一次定时器函数中显示剩余秒数转化为的时间 1. 设置两个时间戳，一个是当前的，另一个是目标时间的 2. 求出距离下班还有多少秒 3. 获取时，分，秒。并将剩余秒数转化为的时间添加到页面中 4. 修改细节

时间到了关定时器
修改当前时间

代码

<!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"></p>
    <p class="title">下班倒计时</p>
    <p class="clock">
      <span id="hour"></span>
      <i>:</i>
      <span id="minutes"></span>
      <i>:</i>
      <span id="second"></span>
    </p>
    <p class="tips"></p>
  </div>
  <script>
   let hourObj = document.querySelector('#hour')
   let minuteObj = document.querySelector('#minutes')
   let secondObj = document.querySelector('#second')
   let next = document.querySelector('.next')
   let tips = document.querySelector('.tips')
   let flag
   function fn() {
     // 当前时间戳
    let d1 = + new Date()
    // 毕业时间戳
    let d2 = + new Date('2022/4/16 00:00:00')
    let t = (d2 - d1) / 1000 // 转化为秒
    // 倒计时
    // 时分秒公式
    let h = parseInt(t / 60 / 60 % 24) + ''
    let m = parseInt(t / 60 % 60) + ''
    let s = parseInt(t % 60) + ''
    //不足两位补零   并显示在页面中
    hourObj.innerHTML = h.padStart(2 , '0')
    minuteObj.innerHTML = m.padStart(2 , '0')
    secondObj.innerHTML = s.padStart(2 , '0')

    // 显示当前时间
    let date = new Date()
    next.innerHTML = `今天是 ${date.toLocaleDateString()}`
    tips.innerHTML = `当前时间是 ${date.toLocaleTimeString()}`

    // 时间到了关定时器
    if(d2 - d1 <= 0) flag = true
   }

   // 开启定时器
   fn()  //开启定时器之前执行一次避免出现空白
   let timerId = setInterval(fn , 1000)
   if(flag) {
   clearInterval(timerId)
   hourObj.innerHTML = '00'
   minuteObj.innerHTML = '00'
   secondObj.innerHTML = '00'
 }   
  </script>
</body>

</html>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2023-03-15，如有侵权请联系 cloudcommunity@tencent.com 删除

定时器