原生JS 实现日期倒计时效果

慕遥慕遥

已于 2023-02-10 13:12:09 修改

阅读量798

点赞数 1

文章标签： javascript 前端 html css3

于 2022-08-14 16:50:57 首次发布

本文链接：https://blog.csdn.net/m0_64191440/article/details/126332150

版权

每逢佳节倍思亲

时间滴答滴答的逝去

离团聚的日子又近了一点

写一个简单的倒计时效果

让我们的团聚在一点点看见中来临

思路：

1.首先获取当前时间

2.获取所需时间

2.获取时间差（所需时间减去当前时间）

4.计算剩余时间天数小时数分钟数秒数毫秒数

5.时间不能是负数判定一下即可

代码如下：

<!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: 680px;
        font-size: 80px;
        margin: 80px auto;
        text-shadow: 16px 10px 5px rgba(187, 65, 187, 0.678),
          5px 4px 6px rgba(215, 106, 82, 0.847), 2px 2px 2px rgb(118, 244, 9);
        font-family: 楷体;
      }
    </style>
  </head>
  <body>
    <h2>距离中秋节还有：</h2>
    <div id="countdown">XX天 XX时 XX分 XX秒 XXX</div>
    <script>
      // window.onload ：等待网页中所有标签加载完成后，再执行事件中的代码
      // 网页加载事件：保障代码运行时，网页标签已经加载完成
      window.onload = function () {
        var _countdown = document.getElementById("countdown");
        var _time;

        // 倒计时函数
        function countDownFn() {
          // 获取当前时间
          var date = new Date();
          // 获取中秋时间
          var tgt = new Date("2022-09-10 00:00:00");
          // 获取时间差
          var distance = tgt - date;
          if (distance <= 0) {
            alert("目标时间不能小于当前时间");
            clearInterval(_time);
            return;
          }
          console.log(distance, "时间差");

          // 计算剩余时间
          var d = Math.floor(distance / (1000 * 60 * 60 * 24));
          var h = Math.floor((distance / (1000 * 60 * 60)) % 24);
          var m = Math.floor((distance / (1000 * 60)) % 60);
          var ms = distance % 1000;

          var time =
            d.toString().padStart(2, "0") +
            "天" +
            h.toString().padStart(2, "0") +
            "时" +
            m.toString().padStart(2, "0") +
            "分" +
            ms.toString().padStart(3, "0");

          _countdown.innerText = time;
        }

        _time = setInterval(function () {
          countDownFn();
        }, 80);
      };
    </script>
  </body>
</html>

网页显示内容如下：