js实现计数

实现计数器功能

在JavaScript中实现计数功能可以通过多种方式完成，以下是几种常见的实现方法：

使用变量计数

let count = 0;

function increment() {
    count++;
    console.log(count);
}

function decrement() {
    count--;
    console.log(count);
}

使用闭包保持计数状态

function createCounter() {
    let count = 0;
    return {
        increment: function() {
            count++;
            console.log(count);
        },
        decrement: function() {
            count--;
            console.log(count);
        },
        getCount: function() {
            return count;
        }
    };
}

const counter = createCounter();
counter.increment();
counter.decrement();

使用对象属性计数

const counter = {
    count: 0,
    increment: function() {
        this.count++;
        console.log(this.count);
    },
    decrement: function() {
        this.count--;
        console.log(this.count);
    }
};

counter.increment();
counter.decrement();

使用class实现计数器

class Counter {
    constructor() {
        this.count = 0;
    }

    increment() {
        this.count++;
        console.log(this.count);
    }

    decrement() {
        this.count--;
        console.log(this.count);
    }

    getCount() {
        return this.count;
    }
}

const myCounter = new Counter();
myCounter.increment();
myCounter.decrement();

在HTML中实现可视计数器

<button id="increment">+</button>
<span id="count">0</span>
<button id="decrement">-</button>

<script>
    let count = 0;
    const countElement = document.getElementById('count');
    const incrementBtn = document.getElementById('increment');
    const decrementBtn = document.getElementById('decrement');

    incrementBtn.addEventListener('click', () => {
        count++;
        countElement.textContent = count;
    });

    decrementBtn.addEventListener('click', () => {
        count--;
        countElement.textContent = count;
    });
</script>

使用localStorage持久化计数

// 初始化计数器
if (!localStorage.getItem('count')) {
    localStorage.setItem('count', 0);
}

function increment() {
    let count = parseInt(localStorage.getItem('count'));
    count++;
    localStorage.setItem('count', count);
    console.log(count);
}

function decrement() {
    let count = parseInt(localStorage.getItem('count'));
    count--;
    localStorage.setItem('count', count);
    console.log(count);
}

这些方法涵盖了从简单到复杂的各种计数实现方式，可以根据具体需求选择合适的方法。对于需要持久化或共享状态的场景，可以考虑使用localStorage或更复杂的状态管理方案。