用HTML和JavaScript实现时间倒数计时

LXHVB • 2025-02-25 18:17 • 编程

一、选取倒计时组件

为了实现时间倒数计时功能，我们需要选择一个适合的JavaScript库或组件。目前市场上有很多可选的组件，如Flipclock.js，countdown.js和moment.js等。这里我们选择使用countdown.js，因为它具有轻量级和可定制化的特点，可以满足我们的需求。

二、编写HTML代码

在HTML代码中，我们需要设置一个容器来显示倒计时。例如，我们使用一个div标签，并且给它一个id属性，称之为”countdown”

    <div id="countdown"></div>

三、编写JavaScript代码

在JavaScript文件中，我们需要启用countdown.js库，并设置倒计时的参数和选项。以下是我们需要设置的参数，其中endDate是倒计时结束的日期和时间。

    var endDate = '2021/12/31 23:59:59'; //倒计时结束日期
    $('#countdown').countdown(endDate, function(event) {
      $(this).html(event.strftime('%w weeks %d days %H:%M:%S')); //倒计时格式
    });

四、样式设置

最后，我们需要设置样式来美化倒计时。这里我们可以使用CSS样式表来为倒计时容器设置宽度，高度和颜色等。

    #countdown {
      width: 500px;
      height: 200px;
      background-color: #fff;
      color: #000;
      font-size: 50px;
      text-align: center;
      padding-top: 75px;
    }

五、完整代码示例

  <!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8">
      <title>倒计时</title>
      <style>
        #countdown {
          width: 500px;
          height: 200px;
          background-color: #fff;
          color: #000;
          font-size: 50px;
          text-align: center;
          padding-top: 75px;
        }
      </style>
      <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.countdown/2.2.0/jquery.countdown.min.js"></script>
    </head>
    <body>
      <div id="countdown"></div>
      <script>
        var endDate = '2021/12/31 23:59:59'; //倒计时结束日期
        $('#countdown').countdown(endDate, function(event) {
          $(this).html(event.strftime('%w weeks %d days %H:%M:%S')); //倒计时格式
        });
      </script>
    </body>
  </html>

原创文章，作者：LXHVB，如若转载，请注明出处：https://www.506064.com/n/361702.html