2016-11-29 16 views
1

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

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
+0

秒を変更するためのsetTimeoutがあるのがわかりますが、そこにある色を変更しようとしていません。 – Taplar

+0

setColors関数のSetTimeoutを持っていましたが、破損していました –

+0

ヒント:(anyPositiveNumber%array.length)== [0、配列の長さ-1]の範囲 – Taplar

答えて

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>

+1

非常に簡潔、@ kukkuzありがとう:) –

1
// 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); 
}; 
このような何かがあなたのために働くん

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

+0

それが私が必要としていたものです。私は現在、突然変異を研究しています。ありがとうございました@md asiful haque :) –

3

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

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

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

関連する問題