使用 JavaScript 创建一个简单的点击计数器
点击计数器记录点击次数并将其显示在屏幕上。计数器使用 JavaScript click 事件来增加计数器值。我们可以在各个领域使用它，包括在游戏中（以增加积分或得分值）和一些节省时间的技巧。让我们看看在 JavaScript 中创建一个简单的点击计数器的代码。
使用 JavaScript 在按钮上单击计数器
<h3><center>JavaScript Click Counter</center></h3>
<div>
<center><h3 id="counter-label">0</h3></center>
</div>
<center>
<div>
<button onclick="incrementClick()">Click Me</button>
<button onclick="resetCounter()">Reset</button>
</div>
</center>
var counterVal = 0;
function incrementClick() {
updateDisplay(++counterVal);
}
function resetCounter() {
counterVal = 0;
updateDisplay(counterVal);
}
function updateDisplay(val) {
document.getElementById("counter-label").innerHTML = val;
}
在代码中，我们在每次用户点击时将计数器变量 counterVal 的值增加 1。步骤如下。
-
我们在 HTML 中创建一个带有
<h3>标签的计数器显示，并为其分配一个 idcounter-label，以便它可以通过document.getElementById()从 javascript 代码中更新 javascript 中的函数。 -
在 HTML 中，我们还添加了几个按钮。一个带有
Click Me文本的按钮，点击后计数器值增加1。类似地，在另一个按钮中，我们在 HTML 中有一个Reset文本，它将计数器重置为0。 -
单击
click me按钮，我们需要增加计数器值。为此，我们使用onclick事件侦听器。并通过点击Click Me按钮触发incrementClick()函数。 -
在
incrementClick()函数内，我们将全局变量counterVal增加 1 并调用updateDisplay函数。 -
点击
Reset按钮，我们调用resetCounter()函数。在这个函数中，我们将全局计数器值 (counterVal) 重置为0并调用updateDisplay()函数。 -
在
updateDisplay()函数中，我们将它作为参数接收到的值显示到保存计数器值的<h3>标签中。它使用 javascript 的document.getElementById()函数来查询 id 为counter-label的 HTML 元素，然后用新的计数器值更新 innerHTML 属性。innerHTML属性进一步更改了在 HTML GUI 界面中显示的文本。
上面的代码示例显示点击计数器并在按钮点击时增加它。在大多数用例中，我们可能不会始终在按钮上应用点击计数器。为了使其灵活，我们必须支持其他 HTML 元素的功能，例如 div、li 等。几乎所有 HTML 元素都有带有 onclick 事件处理程序的 click 事件。
使用 JavaScript 在 div 上单击计数器
在游戏中，场景并不总是有一个按钮来触发计数器递增。大多数情况下，它可能由像 div 这样的 HTML 元素组成。在这种情况下，我们可以使用 div 标签的 onclick 事件处理程序来捕获单击以增加计数器值。请参考以下代码示例。
<h3><center>JavaScript Click Counter</center></h3>
<div>
<center><h3 id="counter-label">0</h3></center>
</div>
<center>
<div>
<div onclick="incrementClick()">Click Me</div>
<button onclick="resetCounter()">Reset</button>
</div>
</center>
var counterVal = 0;
function incrementClick() {
updateDisplay(++counterVal);
}
function resetCounter() {
counterVal = 0;
updateDisplay(counterVal);
}
function updateDisplay(val) {
document.getElementById("counter-label").innerHTML = val;
}
你可能会注意到，在此示例中，我们在 <div onclick="incrementClick()">Click Me</div> 行中使用了 div。通过此更改，incrementClick() 在单击 div 而不是按钮时被触发。该代码也适用于 <li>、<a>、<div> 等 HTML 标签。几乎所有支持 onclick 事件处理程序的 HTML 标签都可以与一个 onclick 侦听器相关联并进行类似的处理。
点击计数器 - 无障碍方法
如果我们在 JavaScript 中以一种无障碍的方法实现点击计数器，我们将需要删除 HTML 中的 onclick 事件处理程序并将其移动到 JavaScript 代码中。但是代码结构看起来有点不同，请观察以下示例代码。
<h3><center>JavaScript Click Counter</center></h3>
<div>
<center><h3 id="counter-label">0</h3></center>
</div>
<center>
<div>
<div id="click-div">Click Me</div>
<button id="reset-button">Reset</button>
</div>
</center>
window.onload = function () {
let clickDiv = document.getElementById("click-div");
clickDiv.onclick = incrementClick;
let resetBtn = document.getElementById("reset-button");
resetBtn.onclick = resetCounter;
}
var counterVal = 0;
incrementClick = function() {
updateDisplay(++counterVal);
}
function resetCounter() {
counterVal = 0;
updateDisplay(counterVal);
}
function updateDisplay(val) {
document.getElementById("counter-label").innerHTML = val;
}
在这里，我们将点击事件绑定到 JavaScript 代码中。结构保持不变，除了我们对 Click Me div 和 Reset 按钮使用 onclick 侦听器。这种绑定发生在运行时。对于那个点击监听器，我们绑定了我们定义的函数。所以代码看起来很相似，并没有太多变化。
评论
无障碍方法之间的区别在于，我们在 javascript 代码中绑定了 onclick 侦听器，而不是在 HTML 中进行绑定。如果为按钮或 div 分配了 onclick 事件处理程序，将很难仅从 HTML 中实现。
使用这种方法，代码看起来更清晰，因为所有 onclick 事件都在 JavaScript 中绑定和处理。它通过标记保持 HTML 干净，因为没有 JavaScript 代码侵入 HTML。
如果我们不在 window.onload 函数中设置 onclick 侦听器，代码将无法工作。document.getElementById("click-div") 代码将返回 null，因为它将无法找到 HTML 元素。wondow.onload 函数在窗口加载完毕且 DOM 准备就绪后被触发。因此，通过将代码放在 window.onload 块中，可以确保加载 HTML 元素，并且可以使用 JavaScript 的 document.getElementById() 函数进行查询。