每秒轮换一次数组

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

提前感谢您提供的任何帮助:)

• K

Answer 1

您不必更改原始数组。只需使用模数

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

在开始时用 0 调用它，并在循环中调用它并给它秒数。

Answer 2

您可以从数组末尾弹出一种颜色，然后使用以下方法将其添加到数组开头：

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 3

// 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);
};

这样的事情对你有用吗？