构建可配置的JavaScript加权点击计数器与共享总计功能-html教程-PHP中文网

构建可配置的JavaScript加权点击计数器与共享总计功能

本文详细讲解如何使用javascript构建一个灵活的点击计数器系统。该系统支持两种计数模式：一种是每次点击增加1，另一种是每n次点击增加1。所有计数器的增量将实时累加到一个共享的总计显示区域，并通过扩展html数据属性实现高度可配置性，提供了一个可扩展且易于维护的解决方案。

在现代前端开发中，动态的用户交互是构建丰富体验的关键。点击计数器作为一种常见的交互元素，其需求可能不仅仅是简单的每次点击加一。有时，我们需要实现更复杂的逻辑，例如某个计数器每点击N次才对总数贡献1，而另一个计数器则每次点击贡献1。此外，所有这些独立的计数器可能需要将它们的“价值”累加到一个共享的总计显示区域。本教程将指导您如何通过扩展现有的JavaScript类和HTML数据属性，构建一个功能强大且高度可配置的加权点击计数器系统。

1. 需求分析与现有结构审视

我们的目标是实现以下功能：

两个独立的点击计数器，每个都有自己的显示和重置按钮。
一个名为“Verified Videos”的计数器，每次点击其按钮时，总计增加1。
一个名为“Document Count”的计数器，每当其点击次数达到9的倍数（9, 18, 27...）时，总计增加1。
页面底部有一个共享的“Total Units”显示区域，用于累加所有计数器的加权值。
每个计数器的重置操作应正确地从总计中减去其贡献值。

现有的JavaScript代码包含一个ClickCount类，它负责处理单个计数器的点击、显示和重置逻辑。HTML结构使用data-config-click属性来配置每个计数器。CSS则提供了基本的样式。

// 初始的 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();
  }
}

登录后复制

要实现加权总计功能，我们需要对这个类进行扩展，并修改HTML以传递更多配置信息。

立即学习“Java免费学习笔记（深入）”；

2. 扩展HTML数据属性配置

为了让每个计数器能够定义其权重以及知道总计显示在何处，我们将扩展data-config-click属性。

weight: 定义权重，例如9表示每9次点击总计增加1，1表示每次点击总计增加1。
resultElement: 指定共享总计元素的CSS选择器，例如#total-units。

修改后的HTML结构如下：

<div class="block-wrapper">
  <div class="doctile">
    <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>
  </div>
  <div class="vidtile">
    <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>
  </div>
</div>
<span class="totaltile">
  <p>Total Units =
    <span id="total-units">
      0
    </span>
  </p>
</span>

登录后复制

关键修改点：

Quinvio AI

AI辅助下快速创建视频，虚拟代言人

查看详情

data-config-click中新增了"weight": 9（针对“Document Count”）和"weight": 1（针对“Verified Videos”）。
data-config-click中新增了"resultElement": "#total-units"，指向共享总计的元素。
页面底部的总计显示区域从document.write(this.count)改为一个带有id="total-units"的<span>标签，并初始化为0。这是因为document.write(this.count)在JavaScript类外部无法正确访问this.count，且不适合动态更新。

3. 改造ClickCount类以支持加权总计

为了处理加权逻辑和更新共享总计，我们需要对ClickCount类进行以下增强：

构造函数扩展: 接收weight和resultNode参数。
increaseTotal()方法: 计算当前计数器点击后对总计的增量。
decreaseTotal()方法: 计算当前计数器重置后对总计的减量。
事件监听器集成: 在点击和重置事件中调用increaseTotal()和decreaseTotal()。

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; // 新增：共享总计的DOM节点
      this.count = 0;
      this.handleClick();
      this.handleCount();
    }

    /**
     * 计算并增加总计值。
     * 该方法在每次点击事件发生时调用，
     * 它会根据当前计数器的权重，计算点击前后对总计的影响，并更新共享总计。
     */
    increaseTotal() {
      // 获取当前的总计值，如果是非数字则默认为0
      let currentTotal = isNaN(this.resultNode.innerHTML)
        ? 0
        : parseInt(this.resultNode.innerHTML);

      // 计算当前点击前的计数器对总计的贡献（基于this.count）
      const weightedCountBefore = parseInt(this.count / this.weight);
      // 从总计中减去旧的贡献
      currentTotal -= weightedCountBefore;

      // 计算点击一次后（this.count + 1）计数器对总计的新贡献
      const weightedCountAfter = parseInt((this.count + 1) / this.weight);
      // 将新的贡献加到总计中
      currentTotal += weightedCountAfter;

      // 更新共享总计的显示
      this.resultNode.innerHTML = currentTotal;
    }

    /**
     * 计算并减少总计值。
     * 该方法在计数器重置时调用，
     * 它会从共享总计中减去当前计数器重置前的所有贡献。
     */
    decreaseTotal() {
      // 获取当前的总计值，如果是非数字则默认为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;
    }

    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(); // 更新当前计数显示
    }
  }

  // 初始化所有点击计数器
  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);
    // 获取共享总计的DOM节点
    const resultNode = document.querySelector(resultElement);

    if (triggerNode && targetNode) {
      new ClickCount({
        triggerNode,
        targetNode,
        resetNode,
        resultNode, // 传递给构造函数
        weight, // 传递给构造函数
      });
    }
  });
};

登录后复制

代码解释：

window.onload = () => { ... }: 将所有JavaScript代码包裹在window.onload事件监听器中，确保在DOM完全加载和解析完毕后再执行脚本，避免因为元素未加载而导致的错误。
constructor(obj): 现在接收weight和resultNode，并将它们存储为实例属性。
increaseTotal():
- 首先获取当前#total-units的文本内容并尝试解析为整数。isNaN检查用于处理初始或无效值，确保它从0开始。
- weightedCountBefore = parseInt(this.count / this.weight)：计算当前计数（点击前）对总计的贡献。
- currentTotal -= weightedCountBefore：从总计中减去旧的贡献。
- weightedCountAfter = parseInt((this.count + 1) / this.weight)：计算点击后（this.count + 1）对总计的新贡献。
- currentTotal += weightedCountAfter：将新的贡献加回总计。
- 这种增量更新方式确保了即使权重很高（例如weight=9），总计也能正确地在9的倍数时增加1，而不是每次点击都重新计算整个计数器的总贡献。
decreaseTotal():
- 在重置计数器之前，计算当前计数器在重置前对总计的贡献。
- 从总计中减去这个贡献，然后才将this.count重置为0。这保证了总计的准确性。
handleClick(): 在递增this.count之前，先调用this.increaseTotal()来更新共享总计。
handleReset(): 在重置this.count为0之前，先调用this.decreaseTotal()来从共享总计中移除该计数器的贡献。
初始化逻辑: clickBlock.forEach循环现在会从data-config-click中解析出weight和resultElement。然后，它使用document.querySelector(resultElement)获取到共享总计的DOM节点resultNode，并将这些新的参数一并传递给ClickCount的构造函数。

4. 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 {
  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;
}

.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 {
  background-color: rgb(85, 85, 85, .4);
}

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

.button-reset {
  background-color: rgb(85, 85, 85, .4);
  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;
}

登录后复制

5. 完整代码示例

为了方便您进行测试和部署，以下是完整的HTML、CSS和JavaScript代码。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Click counter</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <div class="block-wrapper">
    <div class="doctile">
      <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>
    </div>
    <div class="vidtile">
      <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>
    </div>
  </div>
  <span class="totaltile">
    <p>Total Units =
      <span id="total-units">
        0
      </span>
    </p>
  </span>
  <script src="./script.js"></script>
</body>
</html>

登录后复制

style.css