Javascript : 每次单击元素时递增计数器

在 Web 开发中，我们经常需要处理用户与网页元素的交互，并且需要对这些交互行为进行计数或记录。在本文中，我们将介绍一种使用 Javascript 实现每次单击元素时递增计数器的方法，以及如何通过 HTML、CSS 和 Javascript 将其实现在网页中。

HTML

首先，我们需要在 HTML 中创建一个包含计数器的元素。在本例中，我们创建一个按钮元素，并将其包装在一个 div 元素内。我们还需要创建一个显示计数器值的 span 元素，它的初始值为 0。

<div>
  <button id="click-me">Click me!</button>
  <br />
  <span id="count">0</span>
</div>

CSS

接下来，我们需要使用 CSS 来设置元素的样式，以便我们可以在网页中看到它们。在本例中，我们将使用 CSS 设置按钮和 span 元素的字体样式和位置。

button {
  font-size: 20px;
  padding: 10px;
  margin: 20px;
}

#count {
  font-size: 24px;
  margin-top: 20px;
}

Javascript

现在，我们将使用 Javascript 来实现每次单击按钮时递增计数器的功能。我们将使用事件监听器来检测按钮的单击行为，并在每次单击时将计数器值加 1。

// 获取按钮元素和计数器值的 span 元素
const button = document.getElementById('click-me');
const count = document.getElementById('count');

// 定义计数器变量和单击事件监听器
let counter = 0;
button.addEventListener('click', () => {
  counter += 1;
  count.innerHTML = counter;
});

总结

完成了以上步骤，我们已经成功地在网页中创建了一个每次单击元素时递增计数器的功能。通过使用 HTML、CSS 和 Javascript，我们可以轻松地为网页添加交互行为，并对这些行为进行记录或反馈。

Codepen 示例

你可以通过以下链接访问 Codepen 示例来查看完整的实现代码和效果：

每次单击元素时递增计数器 - Javascript