JS新手求助：如何实现函数循环，让计数器到4后重置为0？

要实现计数器到4时重置为0的循环逻辑，只需修改两个核心点，同时精简冗余代码：

1. 修正计数器循环逻辑 #

把原来的计数器更新代码：

count = count<7?count+1:7;

替换成取模运算，这样计数到3（对应第4次点击）后，下一次会自动回到0：

count = (count + 1) % 4;

取模运算%返回除法余数，当count+1等于4时，4%4=0，完美实现0→1→2→3→0的循环。

2. 精简冗余的switch分支 #

原代码中case 3/6和case 0逻辑重复，case4和case1重复，case5和case2重复。现在计数器仅在0-3循环，直接保留对应3个核心动作+第4次的动作即可（若第4次动作和第1次一致，可直接复用逻辑）。

另外，将moveCard、moveCard2、moveCard3从switch分支内移到外层，避免每次点击重复创建函数，提升性能和代码可读性。

修改后的完整代码 #

onload = init;

function init() {
    var onclick = clickUpdates();
    var btn = document.getElementById("NOButton");
    btn.addEventListener("click", onclick, false);
}

function clickUpdates() {
    var count = 0;

    // 把移动卡片的函数提取到外层，避免重复定义
    function moveCard() {
        var card1 = document.querySelector('.card1');
        var card2 = document.querySelector('.card2');
        var card3 = document.querySelector('.card3');
        setTimeout(function() {
            setTimeout(function() {
                card1.style.transitionDuration = '1.2s';
                card1.style.transform = 'translate(0px, -100px)';
            }, 100);
            card2.style.transitionDuration = '1.2s';
            card2.style.transform = 'translate(0px, 50px)';
            card2.style.zIndex = '3';
            card3.style.transitionDuration = '1.2s';
            card3.style.transform = 'translate(0px, 50px)';
            card3.style.zIndex = '2';
            card1.style.zIndex = '1';
        }, 10);
    }

    function moveCard2() {
        var card1 = document.querySelector('.card1');
        var card2 = document.querySelector('.card2');
        var card3 = document.querySelector('.card3');
        card2.style.transform = 'translate(-1000px, -200px)';
        card2.style.zIndex = '1';
        setTimeout(function() {
            setTimeout(function() {
                card2.style.transitionDuration = '1.2s';
                card2.style.transform = 'translate(0px, -50px)';  
            }, 100);        
            card3.style.transitionDuration = '1.2s';
            card3.style.transform = 'translate(0px, 100px)';
            card3.style.zIndex = '3';
            card1.style.transitionDuration = '1.2s';
            card1.style.transform = 'translate(0px, -50px)';
            card1.style.zIndex = '2';
            card2.style.zIndex = '2';
        }, 10);
    }

    function moveCard3() {
        var card1 = document.querySelector('.card1');
        var card2 = document.querySelector('.card2');
        var card3 = document.querySelector('.card3');
        card3.style.transform = 'translate(-1000px, -200px)';
        card3.style.zIndex = '1';
        setTimeout(function() {
            setTimeout(function() {
                card3.style.transitionDuration = '1.2s';
                card3.style.transform = 'translate(0px, 0px)';
            }, 100);   
            card1.style.transitionDuration = '1.2s';
            card1.style.transform = 'translate(0px, 0px)';
            card1.style.zIndex = '3';
            card2.style.transitionDuration = '1.2s';
            card2.style.transform = 'translate(0px, 0px)';
            card2.style.zIndex = '2';
            card3.style.zIndex = '1';
        }, 10);
    }

    var next = function() {
        switch(count) {
            case 0:
                // 第1次点击逻辑
                card1.style.transitionDuration = '1.2s';
                card1.style.transform = 'translate(-1000px, -200px)';
                card1.style.zIndex = '4';
                moveCard();
                break;
            case 1:
                // 第2次点击逻辑
                moveCard2();
                break;
            case 2:
                // 第3次点击逻辑
                moveCard3();
                break;
            case 3:
                // 第4次点击逻辑，与第1次一致
                card1.style.transform = 'translate(-1000px, -200px)';
                moveCard();
                break;
        }
        // 计数器循环更新
        count = (count + 1) % 4;
    }
    
    return next;
}

关键说明 #

• 取模运算(count + 1) % 4是循环逻辑的核心，确保计数器始终在0、1、2、3之间循环。
• 将移动函数提取到外层，避免每次点击重复创建函数，减少不必要的性能开销。
• 现在点击按钮会按第1次→第2次→第3次→第4次→第1次的顺序循环执行卡片动画，完全符合需求。

内容的提问来源于stack exchange，提问作者Bene