极客教程JavaScript 如何计算一个按钮被点击的次数
跟踪按钮的点击是JavaScript中的一项常见任务，可以通过使用addEventListener()方法来实现。通过给按钮元素添加一个事件处理方法，并在每次按钮被按下时递增一个变量，我们可以简单地跟踪按钮的点击次数。我们可以通过在网页上显示该信息并将点击次数保存在localStorage中，快速向用户展示有多少次点击。我们甚至可以在用户关闭浏览器后保存这些点击次数。
假设我们正在建立一个简单的计算器，那么我们将需要一些可以做加、减、乘、除、等于等功能的按钮。因此，在网页上包括一个按钮是使其更具交互性的一种方法。在这篇博客中，我们将主要看到如何设计一个按钮，我们将使它可以被点击，并计算它被用户点击的次数。
创建一个基本的按钮
在开始跟踪按钮的点击之前，我们必须首先在网页上添加一个按钮元素。
例子
<!DOCTYPE html>
<html>
<body>
<button id="myButton">Click Me</button>
</body>
</html>
这将创建一个按钮，文本为 “Click Me”，ID为 “myButton”。我们以后将使用这个ID在我们的JavaScript代码中引用这个按钮。
使用JavaScript跟踪按钮的点击率
方法1：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 “的Button元素。然后，我们将初始化变量clickCount并将其值设为0。这个clickCount变量是用来存储和显示按钮被点击的次数的。
然后，按钮元素通过addEventListener()函数接收事件处理代码。addEventListener()方法的第一个输入指定了要监听的事件类型（在这个例子中是点击）。第二个参数表示当按钮被按下时要执行的功能。
在事件处理方法中递增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对象将数据存储为字符串，所以你需要将数字转换为字符串，并在获取数值时解析回数字。