使用JavaScript制作一个简单的计数器的方法

2023年6月11日上午10:05 • JavaScript

制作一个简单的计数器，可以使用 JavaScript 来完成。

首先，在 HTML 文件中添加一个按钮和一个用于显示计数的元素，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计数器</title>
</head>
<body>
    <button id="countBtn">点击计数</button>
    <p id="result">0</p>
</body>
</html>

按钮的 ID 是 countBtn，用于绑定点击事件；计数的元素 ID 是 result，用于显示当前计数的值。

接着，在 JavaScript 文件中，添加点击事件处理函数，代码如下：

const countBtn = document.getElementById('countBtn');
const result = document.getElementById('result');

let count = 0;

countBtn.addEventListener('click', function() {
    count += 1;
    result.textContent = count;
});

首先，通过 document.getElementById() 方法获取按钮和计数元素的 DOM 对象；

然后，定义一个变量 count 来保存当前计数的值，初始值为 0；

接着，通过 addEventListener() 方法绑定一个点击事件处理函数，当按钮被点击时，增加当前计数的值，并设置计数元素的文本内容为当前计数的值。

现在，刷新页面，可以看到一个简单的计数器已经完成了。每次点击按钮，计数的值将会增加 1，并实时显示在页面上。

以下是一些示例演示：

示例 1：在页面上添加一个按钮和一个计数元素，点击按钮会计数并在计数元素上显示当前计数的值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计数器</title>
</head>
<body>
    <button id="countBtn">点击计数</button>
    <p id="result">0</p>
    <script>
        const countBtn = document.getElementById('countBtn');
        const result = document.getElementById('result');

        let count = 0;

        countBtn.addEventListener('click', function() {
            count += 1;
            result.textContent = count;
        });
    </script>
</body>
</html>

示例 2：在页面上添加多个按钮和计数元素，点击任意一个按钮会计数并在所有计数元素上显示当前计数的值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计数器</title>
</head>
<body>
    <button class="countBtn">点击计数 1</button>
    <p class="result">0</p>
    <button class="countBtn">点击计数 2</button>
    <p class="result">0</p>
    <button class="countBtn">点击计数 3</button>
    <p class="result">0</p>
    <script>
        const countBtns = document.querySelectorAll('.countBtn');
        const results = document.querySelectorAll('.result');

        let count = 0;

        countBtns.forEach((btn) => {
            btn.addEventListener('click', function() {
                count += 1;
                results.forEach((result) => {
                    result.textContent = count;
                });
            });
        });
    </script>
</body>
</html>

以上是对于“使用JavaScript制作一个简单的计数器的方法”的完整攻略。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：使用JavaScript制作一个简单的计数器的方法 - Python技术站