如何使用 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:使用闭包
闭包是一种即使在父函数返回后仍可访问父函数范围内变量的函数。您可以使用闭包以全局范围无法实现的方式跟踪 count 变量。
示例
<!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 对象将数据存储为字符串，因此您需要将数字转换为字符串并在获取值时解析回数字。
