使用js写个方法记录某个按钮的点击次数

你可以使用JavaScript的localStorage来记录按钮的点击次数。以下是一个简单的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Button Click Counter</title>
</head>
<body>
    <button id="myButton">Click me!</button>
    <p id="counter">Click count: 0</p>

    <script>
        // 从localStorage中获取点击次数，如果不存在则默认为0
        let clickCount = localStorage.getItem('clickCount') || 0;

        // 更新页面上的点击次数显示
        document.getElementById('counter').textContent = `Click count: ${clickCount}`;

        // 为按钮添加点击事件监听器
        document.getElementById('myButton').addEventListener('click', function() {
            // 点击次数加1
            clickCount++;
            // 更新localStorage中的点击次数
            localStorage.setItem('clickCount', clickCount);
            // 更新页面上的点击次数显示
            document.getElementById('counter').textContent = `Click count: ${clickCount}`;
        });
    </script>
</body>
</html>

这个示例中，我们首先尝试从localStorage中获取名为clickCount的项，它表示按钮的点击次数。如果该项不存在，我们将其默认为0。然后，我们将这个点击次数显示在页面上的一个<p>元素中。接下来，我们为按钮添加一个点击事件监听器。每次点击按钮时，我们将点击次数加1，更新localStorage中的值，并更新页面上的显示。

posted @ 2024-12-27 06:09  王铁柱6  阅读(104)  评论(0)    收藏  举报