每秒鐘旋轉陣列

Question

我有一個簡單的彩虹時鐘，想法是每一秒通過條紋的背景顏色變爲陣列中的下一個顏色。我試圖獲得秒的值來抵消數組，然後環繞到開始。

var seconds = 0; 

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

將成爲，當我重複：

例如

var seconds = 1; 

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

我目前使用這樣的：

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

但我試圖做一些事情像這樣：

var seconds = time.getSeconds(); 

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

這裏是我的fiddle

預先感謝您的任何幫助，您可以有:)

• ķ

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調用它，並在循環中調用它，給它秒。