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的表单验证-提交表单

    Javascript表单验证是Web开发中的重要环节，可以提升用户体验和网站安全性。以下是通过JS实现表单验证和提交的攻略。 步骤1：HTML表单 首先，在HTML中定义表单元素，包括输入框、单选框、多选框、下拉框等。在表单中设置提交按钮，并添加JS函数来验证表单数据是否符合需要。示例代码如下： <form action="submit.ph…

    JavaScript 2023年6月10日
    00

  • 解决页面js接受Long型损失精度问题(最新解决方案)

    解决页面JS接受Long型损失精度问题(最新解决方案) 在前后端分离的架构下，我们经常需要通过网络传输Long类型的数据，在前端进行处理。但是，由于JS中Number类型采用IEEE 754双精度浮点数表示，会存在精度损失的问题。而Long类型的数据更倾向于采用Java或C++等强类型语言进行处理，因此我们需要找到一种前端解决方案。 方案一：采用BigInt…

    JavaScript 2023年5月28日
    00

  • 百度用到的Js日历 大家可以看看

    让我来详细讲解一下： 百度用到的JS日历 简介 百度用到的JS日历组件是一个基于原生JavaScript开发的日历组件，通过引入该组件可以方便地在网页中展示日历选择器，供用户选择日期。 该组件具有以下特点： 支持多种语言，包括中文、英文、韩文等； 支持自定义选中日期后的回调函数； 支持配置日历初始时间； 支持禁用某些日期的选择； CSS样式可定制化。 如何使…

    JavaScript 2023年6月11日
    00

  • javascript时区函数介绍

    JavaScript 时区函数介绍 什么是时区? 为了使世界上所有地区的时钟都是同步的，人们将地球分为24个时间区，每个时间区之间相差1小时。在不同的时区，同一时刻的时间是不同的。 时区函数 JavaScript 提供了一些时区函数，使得开发者可以对不同时区的日期和时间进行格式化和处理。 1. Date.prototype.toLocaleString() …

    JavaScript 2023年5月27日
    00

  • Android内存泄漏导致原因深入探究

    Android内存泄漏导致原因深入探究 什么是内存泄漏 内存泄漏指无用的对象仍然存在于内存中，导致可用内存减少，最终影响应用的性能和稳定性。 内存泄漏的原因 静态变量 静态变量被声明为全局变量，即便在Activity销毁后仍然存在于内存中，占用了可用内存。如果在静态变量中存储了Activity对象，这些对象将无法释放，导致内存泄漏。 public class…

    JavaScript 2023年6月10日
    00

  • String字符串匹配javascript 正则表达式

    String字符串匹配javascript 正则表达式 什么是正则表达式 正则表达式是一种用来匹配、查找和替换文本的工具，它可以精确匹配一个或多个字符，也可以通过通配符匹配一类字符。在Javascript中，我们可以使用RegExp类来操作正则表达式。 正则表达式的基本语法 在 Javascript 中，正则表达式可以使用字面量或者RegExp类来创建。 使…

    JavaScript 2023年5月28日
    00

  • 用javascript来实现动画导航效果的代码

    当我们需要实现网站导航栏的动画效果时，我们可以使用 JavaScript 来完成。下面是详细的攻略及示例说明： 步骤一：创建 HTML 结构 我们需要创建HTML页面，并添加与导航栏有关的HTML标签，例如 nav、ul、li、a 等标签。这些标签应该与我们要展示的菜单项一致。 在此示例中，我们创建了一个简单的 HTML 结构代码： <nav> …

    JavaScript 2023年6月10日
    00

  • 原生js实现中奖信息无间隙滚动效果

    中奖信息无间隙滚动效果通常是在网页中的信息滚动区域，而且信息要连贯无缝滚动，没有间隙。实现这个效果的方法有很多，下面我来介绍一种基于原生JS实现的方法。 实现原理 在这个效果中，需要用到三个信息块，从上往下分别为当前显示块、上一个块、下一个块。通过修改它们的CSS属性，可以实现连续无缝滚动的效果。 首先在HTML中创建滚动区域并添加三个信息块： <di…

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