当前位置：首页 > JavaScript

js实现计数

2026-02-02 01:51:17JavaScript

实现基本计数器

创建一个简单的计数器，可以通过按钮增加或减少数值。以下是一个完整的HTML和JavaScript示例：

<!DOCTYPE html>
<html>
<head>
    <title>计数器</title>
</head>
<body>
    <div>
        <button id="decrement">-</button>
        <span id="count">0</span>
        <button id="increment">+</button>
    </div>

    <script>
        let count = 0;
        const countElement = document.getElementById('count');
        document.getElementById('increment').addEventListener('click', () => {
            count++;
            countElement.textContent = count;
        });
        document.getElementById('decrement').addEventListener('click', () => {
            count--;
            countElement.textContent = count;
        });
    </script>
</body>
</html>

本地存储持久化

若需刷新页面后保留计数状态，可使用localStorage存储数据：

let count = localStorage.getItem('count') || 0;
const countElement = document.getElementById('count');
countElement.textContent = count;

document.getElementById('increment').addEventListener('click', () => {
    count++;
    countElement.textContent = count;
    localStorage.setItem('count', count);
});

document.getElementById('decrement').addEventListener('click', () => {
    count--;
    countElement.textContent = count;
    localStorage.setItem('count', count);
});

封装为可复用函数

将计数器逻辑封装为函数，便于多次调用：

function createCounter(initialValue = 0, storageKey = null) {
    let count = storageKey ? 
        parseInt(localStorage.getItem(storageKey)) || initialValue : 
        initialValue;

    return {
        get: () => count,
        increment: () => {
            count++;
            if (storageKey) localStorage.setItem(storageKey, count);
        },
        decrement: () => {
            count--;
            if (storageKey) localStorage.setItem(storageKey, count);
        }
    };
}

// 使用示例
const counter = createCounter(0, 'myCounter');
console.log(counter.get()); // 0
counter.increment();
console.log(counter.get()); // 1

使用闭包保护变量

通过闭包避免全局变量污染：

const Counter = (function() {
    let privateCount = 0;
    return {
        current: () => privateCount,
        increment: () => privateCount++,
        decrement: () => privateCount--
    };
})();

Counter.increment();
console.log(Counter.current()); // 1

高级特性：防抖与限制

添加防抖（Debounce）防止快速点击导致数值跳跃：

js实现计数

function debounce(func, delay) {
    let timeout;
    return function() {
        clearTimeout(timeout);
        timeout = setTimeout(() => func.apply(this, arguments), delay);
    };
}

document.getElementById('increment').addEventListener('click', debounce(() => {
    count++;
    countElement.textContent = count;
}, 300));

标签: js