本文详细讲解如何使用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>关键修改点：
- 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
body {
background: #000000; 
