网页循环倒计时插件代码示例 - JavaScript实现 - 常规

以下是一个简单的网页循环倒计时插件的示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>循环倒计时插件</title>
  <style>
    #countdown {
      font-size: 48px;
      text-align: center;
    }
  </style>
</head>
<body>
  <div id='countdown'></div>

  <script>
    // 定义倒计时插件
    function Countdown(element, duration) {
      this.element = element;
      this.duration = duration;
    }

    // 启动倒计时
    Countdown.prototype.start = function() {
      var self = this;
      var timer = setInterval(function() {
        var days, hours, minutes, seconds;
        self.duration--;

        days = Math.floor(self.duration / (60 * 60 * 24));
        hours = Math.floor((self.duration % (60 * 60 * 24)) / (60 * 60));
        minutes = Math.floor((self.duration % (60 * 60)) / 60);
        seconds = self.duration % 60;

        self.element.innerHTML = days + ' 天 ' + hours + ' 小时 ' + minutes + ' 分钟 ' + seconds + ' 秒 ';

        if (self.duration <= 0) {
          clearInterval(timer);
          self.element.innerHTML = '倒计时结束';
        }
      }, 1000);
    };

    // 创建倒计时实例
    var countdownElement = document.getElementById('countdown');
    var countdown = new Countdown(countdownElement, 60 * 60 * 24 * 7); // 持续时间为一周的秒数
    countdown.start();
  </script>
</body>
</html>

这个示例代码创建了一个循环倒计时插件，它会在页面上显示剩余的天数、小时数、分钟数和秒数，并每秒更新一次。持续时间为一周的秒数，可以根据需求进行修改。