极客笔记如何使用JavaScript计算按钮被点击的次数
跟踪按钮点击是JavaScript中的常见任务，可以通过使用addEventListener()方法来实现。通过向按钮元素添加事件处理方法并在每次按下按钮时增加一个变量，我们可以简单地跟踪按钮点击。我们可以通过在网页上展示信息并将点击保存在localStorage中，快速显示用户点击次数。甚至在用户关闭浏览器后，我们也可以保存点击记录。
假设我们正在构建一个简单的计算器，我们将需要具有加法、减法、乘法、除法、等于等功能的按钮。因此，在网页中包含一个按钮是使其更加交互的一种方法。在本文中，我们主要将看到如何设计一个按钮，并使其可点击并计算用户点击的次数。
创建一个基本按钮
在我们开始跟踪按钮点击之前，我们必须首先在网页上添加一个按钮元素。在网页上制作一个按钮最简单的方法是使用<button>HTML元素。
示例
<!DOCTYPE html>
<html>
<body>
<button id="myButton">Click Me</button>
</body>
</html>
这创建了一个带有文本“Click Me”和id为“myButton”的按钮。我们稍后将使用这个id在我们的JavaScript代码中引用这个按钮。
使用JavaScript追踪按钮点击
方法1：addEventListener()
有各种JavaScript方法可以监控按钮的点击，但今天最常用的方法是使用addEventListener()方法。addEventListener()函数是一个内置的JavaScript函数，它将一个事件处理函数添加到一个元素上，当某个特定的事件发生时，该事件处理程序就会运行，例如，当点击按钮时，悬停在任何元素上，进入元素或离开元素。在我们的情况下，我们想要将一个事件处理函数与按钮元素关联起来，当按钮被点击时执行该函数。
示例
这是一个使用addEventListener()方法追踪按钮点击的示例：
<!DOCTYPE html>
<html>
<body>
<button id="myButton">Click Me</button>
<p id="count"></p>
<script>
var count = 0;
var button = document.getElementById("myButton");
var countDisplay = document.getElementById("count");
button.addEventListener("click", function() {
count++;
countDisplay.innerHTML = count;
});
</script>
</body>
</html>
首先，使用getElementById()方法选择ID为”myButton”的按钮元素。然后，我们将初始化clickCount变量并将其值设置为零。这个clickCount变量用于存储和显示按钮被点击的次数。
接下来，按钮元素通过addEventListener()函数接收事件处理程序代码。addEventListener()方法的第一个参数指定要监听的事件类型（在这个示例中是click）。第二个参数指示在按钮按下时要执行的函数。
在事件处理程序方法中递增ClickCount变量，并将ClickCount的当前值记录到屏幕上。这样可以确定按钮点击的频率。
方法2：onclick()
这种方法使用onclick属性将事件处理程序附加到按钮元素。事件处理程序函数每次点击按钮时都会递增一个计数变量。
示例
这是onclick属性的示例代码
<!DOCTYPE html>
<html>
<body>
<button id="myButton">Click Me</button>
<p id="result"></p>
<script>
var count = 0;
var button = document.getElementById("myButton");
var result = document.getElementById("result");
button.onclick = function() {
count++;
result.innerHTML = count;
}
</script>
</body>
</html>
方法3：使用bind方法
该方法使用bind方法将一个事件监听器附加到按钮元素，并将当前计数值绑定到函数。
示例
<!DOCTYPE html>
<html>
<body>
<button id="myButton">Click Me</button>
<p id="count"></p>
<script>
var count = 0;
var button = document.getElementById("myButton");
var countDisplay = document.getElementById("count");
button.addEventListener("click", (function(count) {
return function() {
count++;
countDisplay.innerHTML = count;
}
})(count));
</script>
</body>
</html>
方法4：使用闭包
闭包是一个函数，即使父函数已返回，仍然可以访问父函数作用域中的变量。您可以使用闭包来以一种无法从全局作用域中获得的方式跟踪计数变量。
示例
<!DOCTYPE html>
<html>
<body>
<button id="myButton">Click Me</button>
<p id="count"></p>
<script>
function createCounter() {
let count = 0;
return function() {
count++;
return count;
}
}
const counter = createCounter();
const button = document.getElementById("myButton");
const countDisplay = document.getElementById("count");
button.addEventListener("click", () => {
countDisplay.innerHTML = counter();
});
</script>
</body>
</html>
方法5：将点击计数存储在本地存储中
在网页上显示点击计数是很有用的，但这不是一个长期解决方案。当用户刷新页面或关闭浏览器时，点击计数会丢失。我们可以利用localStorage对象将点击计数保存在用户的浏览器中，以便在用户关闭浏览器后仍能保存点击计数。
示例
以下是使用localStorage保存点击计数的示例：
<!DOCTYPE html>
<html>
<body>
<button id="my-button">Click Me</button>
<div id="click-count">Button clicked: 0 times</div>
<script>
let button = document.getElementById("my-button");
let clickCount = 0;
let display = document.getElementById("click-count");
if (localStorage.getItem("clickCount")) {
clickCount = parseInt(localStorage.getItem("clickCount"));
}
button.addEventListener("click", function() {
clickCount++;
display.innerHTML = "Button clicked: " + clickCount + " times";
localStorage.setItem("clickCount", clickCount);
});
</script>
</body>
</html>
首先要检查localStorage中是否存储有”clickCount”的值。如果在localStorage中存储有值，我们将其解析为整数，并赋值给clickCount变量。
接下来，在事件监听函数中添加一行代码，使用setItem()方法将clickCount变量的当前值保存到localStorage中。这样，即使用户刷新页面或关闭浏览器，点击次数也会在她下次访问网站时得到保存和恢复。
需要注意的是，localStorage对象在不同的浏览器上有约5-10MB的存储限制。此外，localStorage对象将数据存储为字符串，所以在获取值时需要将数字转换为字符串，然后再解析为数字。