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中的进制与进制转换 1. 进制概念 进制是数学中的一个概念，一般用来表示数的基数，也就是每一位可使用的数字个数。常见的进制有十进制、二进制和十六进制。 十进制：使用 0~9 这10个数字表示，每一位值的大小是10的n次方，其中n是这一位数字的位置。 二进制：使用 0 和 1 两个数字表示，每一位值的大小是2的n次方，其中n是这…

    JavaScript 2023年5月19日
    00

  • JavaScript中数据类型转换总结

    下面是JavaScript中数据类型转换总结的攻略： 数据类型转换总结 在JavaScript中，有些数据类型的值可以被隐式转换成其他类型的值。为了达到想要的结果，我们有时需要强制将某个数据类型转换成另一个数据类型。以下内容将介绍JavaScript中的数据类型转换。 1. 转换为数字 当需要将一个值转换成数字时，可以使用一元加运算符（+），或者Number…

    JavaScript 2023年5月28日
    00

  • Javascript函数技巧学习

    下面是详细的讲解“JavaScript函数技巧学习”的完整攻略。 一、入门和基础知识 首先需要熟悉JavaScript函数基础知识，例如函数的定义、调用、参数、返回值等。同时需要了解函数作用域、闭包、箭头函数等高级概念。 二、函数式编程 掌握函数式编程是成为JavaScript高手的必要技能。函数式编程通过组合函数和避免副作用来提高代码的可读性和可维护性，使…

    JavaScript 2023年5月17日
    00

  • javascript cookie操作类的实现代码小结附使用方法

    JavaScript Cookie 操作类的实现代码小结 什么是 Cookie Cookie 是一种在浏览器中用于存储信息的小型文本文件，通常用来存储用户的偏好设置、购物车内容等信息。Cookie 存储在用户的计算机上，由服务器生成并发送给浏览器。 JavaScript Cookie 操作类实现 以下代码演示了如何通过 JavaScript 操作 Cooki…

    JavaScript 2023年6月11日
    00

  • 详解vue中router-link标签所必备了解的属性

    下面我来详细讲解“详解vue中router-link标签所必备了解的属性”。 什么是router-link标签 在Vue中，使用router-link标签可以实现页面的跳转。router-link标签是Vue Router提供的一个组件，它通过Vue Router中的路由规则来控制页面跳转。 router-link标签的必备属性 在使用router-link…

    JavaScript 2023年6月11日
    00

  • JavaScript 开发工具webstrom使用指南

    JavaScript 开发工具webstrom使用指南 概述 WebStorm是一款由JetBrains公司开发的JavaScript集成开发工具（IDE），全称是WebStorm: The Smartest JavaScript IDE，该工具为开发JavaScript应用程序提供了丰富的工具和功能，如语法高亮、智能代码完成功能、代码导航、调试、版本控制等…

    JavaScript 2023年5月19日
    00

  • 使用js获取url中的参数并返回一个对象方式

    获取URL中的参数对于前端开发来说是一个很常见的需求，这里介绍两种使用JS获取URL参数并返回一个对象的方法。 方法一：使用URLSearchParams URLSearchParams是浏览器提供的一个内置对象，可以方便的获取URL参数。以下是具体的实现过程： function getSearchParams() { const params = new …

    JavaScript 2023年5月28日
    00

  • 20道JS原理题助你面试一臂之力(必看)

    《20道JS原理题助你面试一臂之力(必看)》是一篇介绍 JavaScript 基础知识的面试题攻略文章，共包含20道题目。以下是该文章的完整攻略： 1. 什么是原型链？如何理解原型链？ 1.1 定义 原型链是 JS 的一种基本机制，用于实现对象之间的继承。每一个对象都有一个指向另一个对象的指针，称之为原型 prototype。当我们访问一个对象的属性或方法时…

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