毎秒配列を回転する

Question

私は単純な虹の時計を持っています。考えられるのは、ストライプの背景色を通過する毎秒が配列の次の色に変わるということです。私は秒の値を取得して配列をオフセットしようとしているし、先頭にラップアラウンドします。

var seconds = 0; 

var colors = ['red', 'orange', 'yellow', 'green', 'cyan', 'blue', 'violet', 'pink']; 

は私が反復するとき、なる：例えば

$('.color').each(function setColors(i) { 
    $(this).css('background', colors[i]); 
}); 

しかし、私は何かをやろうとしている：私は現在、これを使用してい

var seconds = 1; 

var colors = ['pink', 'red', 'orange', 'yellow', 'green', 'cyan', 'blue', 'violet']; 

このように：

var seconds = time.getSeconds(); 

$('.color').each(function setColors(i) { 
    $(this).css('background', colors[i + seconds]); 
}); 

はここ

fiddleあなたは:)

• K

Answer 1

あなたはポップ配列の終わりとから色を使用して、配列の先頭ににそれを追加することができます。

colors.unshift(colors.pop()); 

をデモは、以下を参照してください：

// get seconds 
 
setInterval(getSeconds, 1000); 
 

 
// set colors 
 
var colors = ['red', 'orange', 'yellow', 'green', 'cyan', 'blue', 'violet', 'pink']; 
 

 
// initalize colors 
 
    $('.color').each(function setColors(i) { 
 
    $(this).css('background', colors[i]); 
 
    }); 
 

 
function getSeconds() { 
 
    var time = new Date($.now()); 
 
    var seconds = time.getSeconds(); 
 
    $('#seconds').text(seconds); 
 

 
    $('.color').each(function setColors(i) { 
 
    $(this).css('background', colors[i]); 
 
    }); 
 
    
 
    // shift the colors 
 
    colors.unshift(colors.pop()); 
 
};

body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#seconds { 
 
    font-size: 3em; 
 
    position: absolute; 
 
    margin: auto; 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    height: 1em; 
 
    width: 3em; 
 
    text-align: center; 
 
    color: #FFF; 
 
    font-family: sans-serif; 
 
    z-index: 100; 
 
} 
 
.color { 
 
    position: relative; 
 
    height: 12.5vh; 
 
    width: 100vw; 
 
    background: #456; 
 
    transition: all 1s ease; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="seconds">seconds</div> 
 

 
<div class="color"></div> 
 
<div class="color"></div> 
 
<div class="color"></div> 
 
<div class="color"></div> 
 
<div class="color"></div> 
 
<div class="color"></div> 
 
<div class="color"></div>

Answer 2

// get seconds 

setInterval(getSeconds, 1000); 

function getSeconds() { 
    var time = new Date($.now()); 
    var seconds = time.getSeconds(); 
    $('#seconds').text(seconds); 
    mutateArray(); 
    setColor(); 
}; 

// set colors 

var colors = ['red', 'orange', 'yellow', 'green', 'cyan', 'blue', 'violet', 'pink']; 

function setColor() { 
    $('.color').each(function setColors(i) { 
     $(this).css('background', colors[i]); 
    }); 
} 

function mutateArray() { 
    var element = colors[colors.length-1]; 
    colors.splice(colors.length-1, 1); 
    colors.splice(0, 0, element); 
    console.log(colors); 
}; 

このような何かがあなたのために働くん

を持つかもしれないの助けを事前にありがとう私のですか？

Answer 3

オリジナルを変更する必要はありませんlアレイ。ちょうどモジュラスを使用する

function changeColors (start) { 
    $('.color').each(function setColors(i) { 
     $(this).css('background', colors[(i + start) % colors.length]); 
    }); 
} 

開始時に0を呼び出し、それを秒単位で呼び出します。