JavaScript实现多按钮点击计数与加权总和计算-html教程-PHP中文网

JavaScript实现多按钮点击计数与加权总和计算

本教程详细介绍了如何使用javascript构建一个灵活的多按钮点击计数系统，并实现一个加权的总和计算功能。通过扩展自定义的`clickcount`类和利用html的`data-*`属性进行配置，我们能够为每个计数器定义独立的权重，并实时更新一个共享的总计显示，支持按次点击累加和按特定倍数累加两种模式，同时确保重置操作也能正确调整总和。

在现代网页应用中，经常需要跟踪用户与页面元素的交互，例如按钮点击次数。当页面上存在多个独立的计数器，并且需要将它们的点击次数以特定规则汇总到一个总计中时，传统的独立计数器方案就显得不足。本教程将指导您如何构建一个模块化的JavaScript解决方案，实现多个按钮的点击计数，并根据预设的权重计算一个统一的总和。

一、核心计数器类设计

我们首先定义一个ClickCount类，它负责管理单个按钮的点击计数和显示。这个类是可复用的，允许我们在页面上创建多个独立的计数器实例。

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();                 // 初始化计数显示
  }

  // 处理点击事件
  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();   // 更新当前计数显示
  }

  // ... (后面会添加 increaseTotal 和 decreaseTotal 方法)
}

登录后复制

关键改进点：

构造函数扩展: 增加了 weight 和 resultNode 属性，用于支持加权总和计算。weight 定义了该计数器对总和的贡献规则，resultNode 是所有计数器共享的总和显示元素。
事件集成: 在 handleClick 和 handleReset 方法中，分别调用了 increaseTotal() 和 decreaseTotal() 方法，确保总和在每次点击和重置时都能同步更新。

二、实现加权总和计算逻辑

为了实现加权总和，我们需要在ClickCount类中添加两个新方法：increaseTotal() 和 decreaseTotal()。这些方法将根据当前计数器的weight属性来计算对总和的影响。

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

// 放置在 ClickCount 类内部
increaseTotal() {
    // 获取当前总和，如果非数字则默认为0
    let currentTotal = isNaN(this.resultNode.innerHTML) ? 0 : parseInt(this.resultNode.innerHTML);

    // 计算当前点击数对总和的贡献值
    const weightedCount = parseInt(this.count / this.weight);
    // 从总和中减去旧的贡献值 (为下一步计算增量做准备)
    currentTotal -= weightedCount;

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

    // 更新总和显示
    this.resultNode.innerHTML = currentTotal;
}

decreaseTotal() {
    // 获取当前总和，如果非数字则默认为0
    let currentTotal = isNaN(this.resultNode.innerHTML) ? 0 : parseInt(this.resultNode.innerHTML);

    // 计算当前点击数对总和的贡献值
    const weightedCount = parseInt(this.count / this.weight);
    // 从总和中减去旧的贡献值 (因为计数器将被重置为0)
    currentTotal -= weightedCount;

    // 更新总和显示
    this.resultNode.innerHTML = currentTotal;
}

登录后复制

逻辑解析：

increaseTotal(): 这个方法的核心在于计算“增量”。它不是简单地加1，而是计算当前点击数（this.count）和点击一次后的点击数（this.count + 1）分别对总和产生的加权贡献，然后取两者之差，将其添加到总和中。例如，如果 weight 为9，当 count 从8变为9时，parseInt(8/9) 是0，parseInt(9/9) 是1，总和会增加1。当 count 从17变为18时，parseInt(17/9) 是1，parseInt(18/9) 是2，总和也会增加1。这种方法确保了只有当点击数达到权重的倍数时，总和才会增加。
decreaseTotal(): 当计数器重置时，我们需要从总和中减去该计数器之前的所有贡献。它通过计算当前 count 的加权值并从 currentTotal 中减去来实现。

三、HTML结构与数据配置

为了让每个计数器能够灵活配置其行为（例如，哪个是触发按钮，哪个是显示区域，以及最重要的：它的权重和总和显示元素），我们使用HTML的data-*属性来存储配置信息。

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

登录后复制

配置详解：

Otter.ai

一个自动的会议记录和笔记工具，会议内容生成和实时转录

查看详情

data-config-click: 这个属性包含一个JSON字符串，用于配置每个ClickCount实例。
- trigger: 触发点击的按钮选择器。
- target: 显示当前计数的元素选择器。
- reset: 重置按钮的选择器。
- weight: 新增，该计数器的权重。
  - "Document Count" 设置 weight: 9，表示每点击9次，总和增加1。
  - "Verified Videos" 设置 weight: 1，表示每点击1次，总和增加1。
- resultElement: 新增，总和显示元素的CSS选择器。这里统一指向 "#total-units"，表明所有计数器都更新同一个总和。
<span id="total-units">0</span>: 这是用于显示所有计数器加权总和的元素。初始值为0。

四、JavaScript初始化逻辑

最后，我们需要在页面加载完成后，遍历所有带有data-config-click属性的元素，解析其配置，并为每个计数器创建ClickCount实例。

window.onload = () => {
  // ClickCount 类定义 (如上面所示)
  class ClickCount {
    // ... 构造函数、handleClick、handleCount、handleReset、increaseTotal、decreaseTotal 方法 ...
    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 weightedCount = parseInt(this.count / this.weight);
      currentTotal -= weightedCount;
      const increasedWeightedCount = parseInt((this.count + 1) / this.weight);
      currentTotal += increasedWeightedCount;
      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();
    }
  }

  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;

    // 获取DOM元素
    const triggerNode = block.querySelector(trigger);
    const targetNode = block.querySelector(target);
    const resetNode = block.querySelector(reset);
    const resultNode = document.querySelector(resultElement); // 注意：这里是document.querySelector，因为resultElement是全局的

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

登录后复制

初始化流程：

window.onload: 确保DOM完全加载后再执行脚本，避免找不到元素。
document.querySelectorAll("[data-config-click]"): 选中所有配置了计数器行为的HTML元素。
遍历与解析: 对每个选中的元素，解析其data-config-click属性中的JSON字符串，提取出trigger, target, reset, weight, resultElement等配置项。
DOM元素查找: 根据选择器查找对应的DOM元素。特别注意，resultNode是全局的，所以使用document.querySelector(resultElement)。
实例化ClickCount: 使用提取出的DOM元素和配置项实例化ClickCount类，从而创建并初始化一个独立的计数器。

五、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 {
  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;
}

登录后复制

总结与注意事项

通过以上步骤，我们成功构建了一个具有以下特点的多计数器加权总和系统：

模块化与可重用性: ClickCount类封装了计数器的所有逻辑，易于在不同页面或项目中复用。
配置灵活: 利用data-*属性，可以在HTML中直接配置每个计数器的行为，无需修改JavaScript代码。
加权总和: 实现了根据不同权重计算总和的逻辑，满足复杂业务需求。
重置同步: 计数器重置时，总和也会相应调整，确保数据一致性。

注意事项：

错误处理: 在实际应用中，您可能需要添加更多的错误处理，例如检查JSON.parse是否成功，或者document.querySelector是否返回了有效的元素。
性能: 对于页面上大量计数器（数百个以上）的情况，直接为每个按钮添加事件监听器可能会影响性能。此时，可以考虑使用事件委托（event delegation）来优化。
初始值: 确保#total-units的初始值与您的业务逻辑相符。在我们的例子中，它被初始化为0。
parseInt() 的行为: parseInt() 在遇到非数字字符时会停止解析，这对于从innerHTML中提取数字是安全的，但要注意其在处理浮点数时的截断行为。在本教程中，由于计数和权重都是整数，这并不是问题。
window.onload vs DOMContentLoaded: window.onload 会等待所有资源（包括图片、CSS等）加载完毕，而 DOMContentLoaded 只等待DOM结构加载完毕。对于纯JavaScript交互，DOMContentLoaded 通常是更快的选择。在本例中，window.onload 也能正常工作。

这个解决方案提供了一个健壮且可扩展的基础，用于管理页面上的多重点击计数和加权总和计算需求。您可以根据自己的具体需求进一步扩展和优化。

以上就是JavaScript实现多按钮点击计数与加权总和计算的详细内容，更多请关注php中文网其它相关文章！