JavaScript 如何计算一个按钮被点击的次数 跟踪按钮的点击是JavaScript中的一项常见任务，可以通过使用addEventListener()方法来实现。通过给按钮元素添加一个事件处理方法，并在每次按钮被按下时递增一个变量，我们可以简单地跟踪按钮的点击次数。我们可以通过在网页上显示该信息并将点击次数保存在localStorage中，快速向用户展示有多少次点击。我们甚至可以在用户关闭浏览器后保存这些点击次数。 假设我们正在建立一个简单的计算器，那么我们将需要一些可以做加、减、乘、除、等于等功能的按钮。因此，在网页上包括一个按钮是使其更具交互性的一种方法。在这篇博客中，我们将主要看到如何设计一个按钮，我们将使它可以被点击，并计算它被用户点击的次数。 创建一个基本的按钮 在开始跟踪按钮的点击之前，我们必须首先在网页上添加一个按钮元素。HTML元素是在网页上制作按钮的最简单方法。 例子 <!DOCTYPE html> <html> <body> <button id="myButton">Click Me</button> </body> </html> HTMLCopy 这将创建一个按钮，文本为 “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> HTMLCopy 首先，使用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> HTMLCopy 方法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> HTMLCopy 方法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> HTMLCopy 方法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> HTMLCopy 首先，我们检查在localStorage的 “clickCount “下是否有一个存储值。如果有一个值存储在localStorage上，那么我们把它解析成一个整数，然后把它分配给clickCount变量。 接下来，在事件监听器函数中添加另一行，使用setItem()方法将clickCount变量的当前值保存到localStorage。这样，即使用户刷新页面或关闭浏览器，点击次数也会被保存，并在她下次访问网站时被检索到。 值得注意的是，localStorage对象有一个存储限制，大约是5-10MB，这取决于浏览器的情况。另外，localStorage对象将数据存储为字符串，所以你需要将数字转换为字符串，并在获取数值时解析回数字。
极客教程