1. Python技术站首页
  2. 其他
  3. JavaScript

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

• JavaScript

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

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

  1. 实现思路

  2. 倒计时插件封装：封装一个倒计时插件，基于面向对象的设计，实现倒计时功能。

  3. 商品对象封装：封装商品对象，其中包含了商品倒计时功能，以及与页面交互的方法。

  4. 商品列表管理：商品管理通过维护一个商品列表，实现对所有商品的统一管理。

  5. 倒计时插件封装

倒计时插件是整个多个商品倒计时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();
  }
};
  1. 商品对象封装

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

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方法来控制商品倒计时的开始和结束。

  1. 商品列表管理

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

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方法启动倒计时。

  1. 示例说明

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

<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>

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

注意事项：

  • 在倒计时过程中，需要轮询更新时间来更新商品显示信息，使用setInterval函数即可实现。
  • 添加商品时，需要传入每个商品的相关信息，包括开始时间、结束时间、商品元素节点等。
  • 商品列表更新时，需要停止之前的所有倒计时，并重新开始。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：同一页面多个商品倒计时JS 基于面向对象的javascript - Python技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • JavaScript 映射器 array.flatMap()

    JavaScript的映射器array.flatMap()方法可以将一个数组的每个元素映射到另一个数组中，然后将所有的映射结果压缩成一个新数组。这个方法适用于一些场景，例如需要从一个二维数组中提取子数组元素，或者想要将多个数组合并成一个新的数组。下面是详细的攻略： 1. 语法 array.flatMap(callback(currentValue[, ind…

    JavaScript 2023年5月27日
    00

  • js按指定格式显示日期时间的样式代码

    下面我将详细讲解如何用 JavaScript 按指定的格式显示日期时间样式的代码攻略。 1. 获取当前的日期和时间 在编写代码显示日期和时间之前，我们需要先获取当前的日期和时间信息。这个过程可以通过 JavaScript 的内置对象 Date 来实现，如下所示： var now = new Date(); 这里定义了一个名为 now 的变量，并通过 new …

    JavaScript 2023年5月27日
    00

  • JS高阶函数原理与用法实例分析

    JS高阶函数原理与用法实例分析 什么是高阶函数？ 在JavaScript语言中，高阶函数是指能够以函数作为参数或返回值的函数。换句话说，高阶函数是处理其他函数的函数。 高阶函数的原理 在JavaScript中，函数本身就是一种对象，可以像其他对象一样作为函数参数或返回值传递。高阶函数的原理就是基于这种JavaScript函数作为对象的特性实现。 通过高阶函数…

    JavaScript 2023年5月27日
    00

  • ajax获取json数据为undefined原因分析

    当我们使用AJAX获取JSON数据时，有时会发现返回的数据无法解析，而返回的结果为undefined。这种情况通常是由于以下原因引起的： 数据格式不正确：JSON 格式要求数据必须为名/值对构成的无序集合。如果返回的数据格式不正确，就无法解析成JSON对象。 跨域请求：由于浏览器的同源策略限制，如果 AJAX 请求的数据源与当前域不一致，则会遇到跨域问题。这…

    JavaScript 2023年6月11日
    00

  • 浅析JavaScript作用域链、执行上下文与闭包

    让我来为你详细讲解一下“浅析JavaScript作用域链、执行上下文与闭包”的完整攻略。 一、作用域链 作用域是指程序中的变量能够被访问的范围。JavaScript采用的是词法作用域，也就是在定义变量时就确定了变量的作用域。作用域链就是由当前执行环境与其上层环境的变量对象组成的链表。在查找变量时，会沿着这个链表一级一级地向上查找，直到找到为止。如果最终还没有…

    JavaScript 2023年6月10日
    00

  • js数组实现权重概率分配

    下面是我对“js数组实现权重概率分配”的完整攻略： 概述 在编写JS代码时，经常会需要进行权重概率分配，即根据给定的权重，随机分配某个值。例如，我们可能需要根据一组商品的销量，按照销量大小进行分配，让销量高的商品出现的概率更大一些，从而提高展示效果。 JS中的数组提供了一种方便的实现方法。我们可以根据权重创建一个数组，数组的每个元素代表对应权重下的值，然后随…

    JavaScript 2023年5月27日
    00

  • 本地存储localStorage用法详解

    本地存储localStorage用法详解 什么是本地存储localStorage 本地存储localStorage是HTML5中提供的一种新的在客户端存储数据的机制，与cookie相比，localStorage有以下优点： 存储容量更大：cookie一般只能存储4KB左右的数据，而localStorage可以存储更大数据（5MB或以上）。 可以存储复杂的数据…

    JavaScript 2023年6月11日
    00

  • 5种 JavaScript 方式实现数组扁平化

    下面是我准备的详细的 “5种 JavaScript 方式实现数组扁平化” 的攻略: 概述 在实际的开发中，数组扁平化是一个经常用到的操作，其中数组扁平化就是将嵌套的多层数组转换成一层数组。本文将会介绍5种 JavaScript 方式实现数组扁平化的具体步骤。 1. 使用 reduce() 方法 该方式使用reduce方法将嵌套的多层数组转换成一层数组。具体步…

    JavaScript 2023年5月27日
    00
合作推广
合作推广
分享本页
返回顶部