使用 JavaScript 创建一个简单的点击计数器

Nithin Krishnan 2023年1月30日 2021年7月4日
  1. 使用 JavaScript 在按钮上单击计数器
  2. 使用 JavaScript 在 div 上单击计数器
  3. 点击计数器 - 无障碍方法
  4. 评论
使用 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> 标签的计数器显示,并为其分配一个 id counter-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 元素的功能,例如 divli 等。几乎所有 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() 函数进行查询。