本文详细讲解如何使用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结构如下：
Total Units = 0
关键修改点：
data-config-click中新增了”weight”: 9（针对“Document Count”）和”weight”: 1（针对“Verified Videos”）。data-config-click中新增了”resultElement”: “#total-units”，指向共享总计的元素。页面底部的总计显示区域从document.write(this.count)改为一个带有id=”total-units”的标签，并初始化为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
Click counter Total Units = 0
style.css
body { background: #000000;
以上就是构建可配置的JavaScript加权点击计数器与共享总计功能的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1600073.html
微信扫一扫 
支付宝扫一扫 
