多计数器联动教程与条件总计实现方法

小伙伴们有没有觉得学习文章很有意思？有意思就对了！今天就给大家带来《多计数器联动与条件总计实现教程》，以下内容将会涉及到，若是在学习中对其中部分知识点有疑问，或许看了本文就能帮到你！

本教程详细介绍了如何使用JavaScript增强现有的点击计数器功能，实现两个独立计数器的数据联动，并根据特定条件（如每次点击或每达到特定倍数）更新一个共享的总计值。文章通过扩展`ClickCount`类和利用HTML `data-*`属性进行配置，提供了模块化且可复用的解决方案，确保计数和总计逻辑的准确性和灵活性。

引言

在现代Web应用中，管理用户交互和实时数据显示是常见的需求。当页面上存在多个独立的交互元素（例如点击按钮）时，我们可能需要对它们的行为进行聚合统计，并根据特定规则更新一个总计值。本教程将指导您如何通过扩展现有的JavaScript点击计数器类，实现两个独立的计数器，并根据不同的权重规则计算并显示一个统一的总计。

核心概念：ClickCount 类

原有的ClickCount类已经能够封装单个点击计数器的逻辑，包括点击事件监听、计数更新和重置功能。其基本结构如下：

class ClickCount {
  constructor(obj) {
    this.triggerNode = obj.triggerNode; // 触发点击的按钮
    this.targetNode = obj.targetNode;   // 显示计数的元素
    this.resetNode = obj.resetNode;     // 重置按钮
    this.count = 0;                     // 当前计数
    this.handleClick();
    this.handleCount();
  }

  handleClick() {
    this.triggerNode.addEventListener("click", () =>
      this.handleCount({ count: this.count++ })
    );
    this.resetNode.addEventListener("click", () => this.handleReset());
  }

  handleCount() {
    this.targetNode.innerHTML = this.count;
  }

  handleReset() {
    this.count = 0;
    this.handleCount();
  }
}

为了实现总计功能，我们需要对这个类进行扩展，使其能够感知并影响一个全局的总计元素。

增强配置：data-config-click 属性

为了使每个计数器实例能够灵活地配置其对总计的影响方式，我们利用HTML元素的 data-* 属性。具体来说，我们将扩展 data-config-click 属性，添加两个新的配置项：

• weight: 一个数字，表示该计数器每达到此数值的倍数时，总计应增加1。例如，weight: 9 意味着每9次点击，总计增加1；weight: 1 意味着每次点击，总计增加1。
• resultElement: 一个CSS选择器，指向页面上显示总计的元素。所有计数器实例将共享这一个总计元素。

更新后的HTML data-config-click 示例如下：

<!-- Document Count 计数器：每9次点击，总计增加1 -->
<div class="c-block" data-config-click='{"selectors":{"trigger":".button","target": ".result","reset":".button-reset", "weight": 9, "resultElement": "#total-units"}}'>
  <b class="result"></b>
  <button class="button button-primary" type="button">Document Count</button>
  <button class="button-reset">Reset</button>
</div>

<!-- Verified Videos 计数器：每次点击，总计增加1 -->
<div class="c-block" data-config-click='{"selectors":{"trigger":".button","target": ".result","reset":".button-reset", "weight": 1, "resultElement": "#total-units"}}'>
  <b class="result"></b>
  <button class="button button-secondary" type="button">Verified Videos</button>
  <button class="button-reset">Reset</button>
</div>

实现总计逻辑

为了处理总计的增加和减少，我们在 ClickCount 类中添加 increaseTotal() 和 decreaseTotal() 方法。

increaseTotal() 方法

此方法在每次按钮点击时被调用，负责根据当前计数器的 weight 更新总计。

increaseTotal() {
  // 获取当前总计值，如果为NaN则初始化为0
  let currentTotal = isNaN(this.resultNode.innerHTML) ? 0 : parseInt(this.resultNode.innerHTML);

  // 计算当前点击前的权重贡献
  const weightedCountBefore = parseInt(this.count / this.weight);
  // 计算点击后的权重贡献 (this.count 此时还未自增)
  const weightedCountAfter = parseInt((this.count + 1) / this.weight);

  // 更新总计：减去旧的贡献，加上新的贡献
  currentTotal = currentTotal - weightedCountBefore + weightedCountAfter;

  this.resultNode.innerHTML = currentTotal;
}

逻辑解释： weightedCountBefore 计算的是当前计数器在本次点击前对总计的贡献值（例如，如果 count 是8，weight 是9，则 weightedCountBefore 是0）。 weightedCountAfter 计算的是如果 count 增加1后，该计数器对总计的贡献值（例如，如果 count 变为9，weight 是9，则 weightedCountAfter 是1）。 通过 currentTotal - weightedCountBefore + weightedCountAfter，我们能够精确地更新总计，只在计数器跨越 weight 的倍数时才改变总计值。

decreaseTotal() 方法

此方法在计数器重置时被调用，负责将当前计数器对总计的贡献从总计中移除。

decreaseTotal() {
  // 获取当前总计值，如果为NaN则初始化为0
  let currentTotal = isNaN(this.resultNode.innerHTML) ? 0 : parseInt(this.resultNode.innerHTML);

  // 计算当前计数器对总计的贡献
  const weightedCount = parseInt(this.count / this.weight);

  // 从总计中减去此贡献
  currentTotal -= weightedCount;

  this.resultNode.innerHTML = currentTotal;
}

逻辑解释： 当一个计数器被重置时，其 count 会变为0。在重置前，它可能已经对总计产生了一定的贡献。decreaseTotal 方法的作用就是撤销这个贡献，确保总计的准确性。

更新 ClickCount 类和初始化逻辑

将上述方法集成到 ClickCount 类中，并修改其构造函数和事件处理方法。

window.onload = () => { // 确保DOM加载完成后执行
  class ClickCount {
    constructor(obj) {
      this.triggerNode = obj.triggerNode;
      this.targetNode = obj.targetNode;
      this.resetNode = obj.resetNode;
      this.weight = obj.weight;           // 新增：权重
      this.resultNode = obj.resultNode;   // 新增：总计显示元素
      this.count = 0;
      this.handleClick();
      this.handleCount();
    }

    increaseTotal() {
      let currentTotal = isNaN(this.resultNode.innerHTML)
        ? 0
        : parseInt(this.resultNode.innerHTML);
      const weightedCountBefore = parseInt(this.count / this.weight);
      const weightedCountAfter = parseInt((this.count + 1) / this.weight);
      currentTotal = currentTotal - weightedCountBefore + weightedCountAfter;
      this.resultNode.innerHTML = currentTotal;
    }

    decreaseTotal() {
      let currentTotal = isNaN(this.resultNode.innerHTML)
        ? 0
        : parseInt(this.resultNode.innerHTML);
      const weightedCount = parseInt(this.count / this.weight);
      currentTotal -= weightedCount;
      this.resultNode.innerHTML = currentTotal;
    }

    handleClick() {
      this.triggerNode.addEventListener("click", () => {
        this.increaseTotal(); // 在计数器自身计数增加前，更新总计
        this.handleCount({
          count: this.count++, // 自身计数增加
        });
      });
      this.resetNode.addEventListener("click", () => this.handleReset());
    }

    handleCount() {
      this.targetNode.innerHTML = this.count;
    }

    handleReset() {
      this.decreaseTotal(); // 重置前，更新总计
      this.count = 0;
      this.handleCount();
    }
  }

  // 遍历所有带有 data-config-click 属性的元素
  const clickBlock = document.querySelectorAll("[data-config-click]");

  clickBlock.forEach((block) => {
    const config = JSON.parse(block.dataset.configClick);
    const { trigger, target, reset, weight, resultElement } = config.selectors; // 解构新增配置项
    const triggerNode = block.querySelector(trigger);
    const targetNode = block.querySelector(target);
    const resetNode = block.querySelector(reset);
    const resultNode = document.querySelector(resultElement); // 获取总计元素

    if (triggerNode && targetNode) {
      new ClickCount({
        triggerNode,
        targetNode,
        resetNode,
        resultNode, // 传递总计元素
        weight,     // 传递权重
      });
    }
  });
};

注意事项：

• 整个初始化代码被包裹在 window.onload 事件监听器中，确保所有DOM元素在脚本执行前已经完全加载。
• 在 handleClick 方法中，increaseTotal() 在 this.count++ 之前调用，这样 increaseTotal 内部计算 weightedCountAfter 时，this.count 仍然是点击前的旧值，而 this.count + 1 正好代表点击后的新值，符合我们的计算逻辑。
• 在 handleReset 方法中，decreaseTotal() 在 this.count = 0 之前调用，这样 decreaseTotal 能够基于重置前的 this.count 值来正确计算并减去贡献。

HTML 结构中的总计显示

为了显示总计，我们需要一个具有特定ID的元素，以便JavaScript能够准确地定位并更新它。

<span class="totaltile">
  <p>Total Units =
    <span id="total-units">0</span> <!-- 总计显示区域，初始值为0 -->
  </p>
</span>

注意： 原始代码中使用了 来显示总计。这种方式在现代JavaScript应用中并不推荐，因为它会阻塞页面渲染，并且 this.count 在此上下文中通常无法正确访问到我们期望的计数器实例。使用一个具有特定ID的 元素，并通过JavaScript动态更新其 innerHTML 是更标准和灵活的做法。

CSS 样式

为了保持页面的美观和功能性，以下是相关的CSS样式，它们定义了按钮、计数器显示和总计区域的布局和外观。

body {
  background: #000000;
  height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

.block-wrapper {
  width: 100vw;
  display: flex;
  justify-content: center;
  margin: auto;
}

.c-block {
  margin: 50px;
}

button,
b {
  display: block;
  text-align: center;
}

button {
  border: none;
  cursor: pointer;
}

button:focus {
  outline: none;
}

.doctile,
.vidtile {
  background-color: #000000;
  margin-top: 40px;
  width: 375px;
  height: 425px;
  border-radius: 12px;
  border: solid;
  border-color: rgb(170, 170, 170, 0.5);
  display: flex;
  justify-content: center;
  margin: 20px;
}

.button {
  margin-top: 40px;
  color: rgb(0, 190, 255);
  padding: 4px 10px;
  border-radius: 6px;
  border: solid;
  border-color: rgb(170, 170, 170, 0.5);
  font-size: 32px;
}

.button:hover {
  opacity: 0.9;
}

.button[disabled] {
  opacity: 0.7;
  cursor: not-allowed;
}

.button-primary,
.button-secondary,
.button-reset {
  background-color: rgb(85, 85, 85, .4);
}

.button-reset {
  display: block;
  color: rgb(0, 190, 255);
  margin: 12px auto 0;
  font-size: 16px;
  padding: 4px 56px;
  border-radius: 6px;
  border: solid;
  border-width: 2px;
  border-color: rgb(170, 170, 170, 0.5);
}

.result {
  color: rgb(0, 190, 255);
  font-size: 100px;
  margin-bottom: 8px;
}

.totaltile {
  width: 500px;
  height: 50px;
  padding: 4px 10px;
  border-radius: 6px;
  border: solid;
  border-color: rgb(170, 170, 170, 0.5);
  font-size: 32px;
  display: flex;
  justify-content: center;
  margin: auto;
}

p {
  color: rgb(0, 190, 255);
  font-size: 25px;
  margin-top: 10px;
}

总结

通过本教程，我们学习了如何通过扩展JavaScript类和利用HTML data-* 属性，实现一个灵活且可配置的多计数器联动总计系统。这种方法提高了代码的模块化和可重用性，使得在页面上管理复杂的用户交互逻辑变得更加简单和高效。关键在于：

• 模块化设计：ClickCount 类封装了单个计数器的所有逻辑。
• 配置化：通过 data-config-click 属性，我们可以为每个计数器实例提供独特的行为配置，如 weight 和 resultElement。
• 精确的总计更新：increaseTotal() 和 decreaseTotal() 方法确保了总计值根据设定的权重规则准确地增加和减少，尤其是在跨越权重倍数时。
• 标准DOM操作：使用 document.querySelector 和 innerHTML 进行DOM更新，而非过时的 document.write。

这种模式不仅适用于点击计数器，还可以推广到其他需要聚合统计和条件更新的场景中。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~