Question

我有一个简单的彩虹时钟，这个想法是每一个通过条纹背景颜色的秒都会变成数组中的下一个颜色。我试图获得秒的值来偏移数组然后回绕到开头。

例如：

SELECT * FROM Balances b
WHERE TheDate IN
(SELECT add_months(LAST_DAY(to_date('28/Feb/2015','DD-MM-YYYY')),level)
from dual
CONNECT BY LEVEL <= MONTHS_BETWEEN 
   (TO_DATE('30/Nov/2016','DD-MM-YYYY'),
    TO_DATE('28/Feb/2015','DD-MM-YYYY')) );

当我迭代时，

会变成：

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

这是我的fiddle

提前感谢您提供任何帮助：）

ķ

Answer 1

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

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

在启动时调用0，并在循环中调用它，给它秒。

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

您可以弹出数组末尾的颜色，并使用以下方法将添加到数组的开头

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>

每秒旋转一次数组

3 个答案: