同一页面多个商品倒计时JS 基于面向对象的javascript

在电商网站中，多个商品可能需要倒计时进行限时抢购，这就需要一个基于面向对象的JavaScript代码来实现同时倒计时多个商品的功能。

实现思路
倒计时插件封装：封装一个倒计时插件，基于面向对象的设计，实现倒计时功能。
商品对象封装：封装商品对象，其中包含了商品倒计时功能，以及与页面交互的方法。
商品列表管理：商品管理通过维护一个商品列表，实现对所有商品的统一管理。
倒计时插件封装

倒计时插件是整个多个商品倒计时JS实现中最重要的部分，一个好的倒计时插件可以实现代码的复用，也可避免在后期维护过程中出现问题。下面我们来实现一个基于面向对象的倒计时插件。

var Countdown = function(options) {
  this.init(options);
};

Countdown.prototype = {
  constructor: Countdown,
  init: function(options) {
    this.options = {
      endDate: new Date(),
      onStart: function() {},
      onEnd: function() {},
      onTimeUpdate: function() {}
    };
    for (key in options) {
      if (options.hasOwnProperty(key)) {
        this.options[key] = options[key];
      }
    }
    this.options.daysNode.innerHTML = "00";
    this.options.hoursNode.innerHTML = "00";
    this.options.minutesNode.innerHTML = "00";
    this.options.secondsNode.innerHTML = "00";
    this.start();
  },
  start: function() {
    var self = this;
    this.options.onStart();

    setInterval(function() {
      var end = new Date(self.options.endDate);
      var now = new Date();
      var seconds = parseInt((end.getTime() - now.getTime()) / 1000);
      if (seconds < 0) {
        self.options.onEnd();
        return;
      }

      var days = Math.floor(seconds / (3600 * 24));
      seconds = seconds - days * 3600 * 24;
      var hours = Math.floor(seconds / 3600);
      seconds = seconds - hours * 3600;
      var minutes = Math.floor(seconds / 60);
      seconds = seconds - minutes * 60;

      self.options.daysNode.innerHTML = self.formatNumber(days);
      self.options.hoursNode.innerHTML = self.formatNumber(hours);
      self.options.minutesNode.innerHTML = self.formatNumber(minutes);
      self.options.secondsNode.innerHTML = self.formatNumber(seconds);

      self.options.onTimeUpdate();
    }, 1000);
  },
  formatNumber: function(number) {
    return number < 10 ? "0" + number.toString() : number.toString();
  }
};

商品对象封装

每个商品需要一个独立的倒计时插件进行倒计时。根据前面的倒计时插件，我们可以很容易地封装一个商品对象来实现每个商品的倒计时功能。下面是实现代码：

var Product = function(options) {
  this.init(options);
};

Product.prototype = {
  constructor: Product,

  init: function(options) {
    var self = this;
    this.options = options;
    this.countdown = new Countdown({
      startDate: this.options.startDate,
      endDate: this.options.endDate,
      daysNode: this.options.daysNode,
      hoursNode: this.options.hoursNode,
      minutesNode: this.options.minutesNode,
      secondsNode: this.options.secondsNode,
      onStart: function() {
        self.options.onStart && self.options.onStart();
      },
      onEnd: function() {
        self.options.onEnd && self.options.onEnd();
      },
      onTimeUpdate: function() {
        self.options.onTimeUpdate && self.options.onTimeUpdate();
      }
    });
  },

  start: function() {
    this.countdown.start();
  },

  stop: function() {
    clearInterval(this.countdown);
  }
};

在商品对象中，我们创建了一个倒计时对象，并通过传递参数来实现倒计时功能。同时，我们还封装了start和stop方法来控制商品倒计时的开始和结束。

商品列表管理

最后，为了让多个商品同时进行倒计时，我们需要维护一个商品列表，在该列表中存储所有商品实例。当需要进行倒计时时，我们可以遍历商品列表，分别对每一个商品进行倒计时。实现代码如下：

var ProductList = function(options) {
  this.init(options);
};

ProductList.prototype = {
  constructor: ProductList,

  init: function(options) {
    var self = this;
    this.options = options || {};
    this.products = [];
    this.loadProducts();
  },

  loadProducts: function() {
    var self = this;
    var productElements = document.querySelectorAll(".product");
    for (var i = 0; i < productElements.length; i++) {
      var el = productElements[i];
      var startDate = new Date();
      var endDate = new Date(
        el.getAttribute("data-end-date")
      );
      var daysNode = el.querySelector(".days");
      var hoursNode = el.querySelector(".hours");
      var minutesNode = el.querySelector(".minutes");
      var secondsNode = el.querySelector(".seconds");

      var product = new Product({
        startDate: startDate,
        endDate: endDate,
        daysNode: daysNode,
        hoursNode: hoursNode,
        minutesNode: minutesNode,
        secondsNode: secondsNode,
        onStart: function() {},
        onEnd: function() {},
        onTimeUpdate: function() {}
      });

      self.products.push(product);
      product.start();
    }
  },

  stopAllProducts: function() {
    for (var i = 0; i < this.products.length; i++) {
      var product = this.products[i];
      product.stop();
    }
  }
};

var productList = new ProductList();

在ProductList的loadProducts方法中，我们遍历查找所有商品的元素，并实例化每一个商品对象。之后，通过start方法启动倒计时。

示例说明

下面是两条示例说明，分别演示基于面向对象的多个商品倒计时的实现。

<html>
<head>
    <title>多个商品倒计时JS示例一</title>
    <script src="countdown.js"></script>
    <script>
        var productList = new ProductList();
    </script>
</head>
<body>
    <div id="product1" class="product" data-end-date="2022-05-01T00:00:00+00:00">
        <div class="days"></div><div class="hours"></div><div class="minutes"></div><div class="seconds"></div>
    </div>
    <div id="product2" class="product" data-end-date="2022-06-01T00:00:00+00:00">
        <div class="days"></div><div class="hours"></div><div class="minutes"></div><div class="seconds"></div>
    </div>
</body>
</html>

上面代码中，我们实例化了一个商品列表，并通过data-end-date属性来设置每一个商品的截止时间。

<html>
<head>
    <title>多个商品倒计时JS示例二</title>
    <script src="countdown.js"></script>
</head>
<body>
    <div id="product1" class="product">
        <div class="days"></div><div class="hours"></div><div class="minutes"></div><div class="seconds"></div>
    </div>
    <div id="product2" class="product">
        <div class="days"></div><div class="hours"></div><div class="minutes"></div><div class="seconds"></div>
    </div>
    <script>
        var product1 = new Product({
            startDate: new Date(),
            endDate: new Date(Date.now()+30000),
            daysNode: document.querySelector('#product1 .days'),
            hoursNode: document.querySelector('#product1 .hours'),
            minutesNode: document.querySelector('#product1 .minutes'),
            secondsNode: document.querySelector('#product1 .seconds'),
        });

        var product2 = new Product({
            startDate: new Date(),
            endDate: new Date(Date.now()+20000),
            daysNode: document.querySelector('#product2 .days'),
            hoursNode: document.querySelector('#product2 .hours'),
            minutesNode: document.querySelector('#product2 .minutes'),
            secondsNode: document.querySelector('#product2 .seconds'),
        });

        product1.start();
        product2.start();
    </script>
</body>
</html>

在上面代码中，我们手动实例化了两个商品，使用了具体的截止时间，而非从页面中获取值。

注意事项：