“警車”的“警燈”,類似於GIF

前端小鐵人發表於2019-10-15

###涉及的知識點:

1.if語句的熟練運用.
2.for迴圈的熟練運動.
    var lis = document.querySelectorAll('li');
    var button = document.querySelector('button');
    var count = 0;  //計數器
    button.onclick = function() {
        count++;
        if(count%2 === 0) {
            for(var i=0; i <lis.length; i++) {
                if(i % 2 ===0) {
                    lis[i].setAttribute('class','green');
                } else {
                    lis[i].setAttribute('class','red');
                }
            }
        }else{
            for(var i=0; i<lis.length; i++) {
                if(i%2 ===0) {
                    lis[i].setAttribute('class','red');
                }else{
                    lis[i].setAttribute('class','green');
                }
            }
        }
    }
    
    //此案例不具有實用性,但是能讓我們充分的對for迴圈和if語句有深刻的瞭解,並且我們通過setInterval就能實現類似於一個GIF的效果,這在電商網之中,我認為是很常見的。複製程式碼

相關文章