Question

我需要创建一个函数，该函数每15秒更改一次背景色，从访问后重新启动的数组中选取颜色。这样，我的函数仅运行一次，如何使从数组中选取一个循环？

$(document).ready(() => {
    const colors = ['#83ACDE','#EDCA38','#A1B2C3','#3C2B1A'];
    function start(i){
      if(i < colors.length){
        setTimeout(function(){
          $('body').css("backgroundColor", colors[i]);
          i++;
          start(i);
        }, 15000);
      }
    }
    start(0);

Answer 1

您可能要考虑使用更快，更高效的CSS动画。

body {
  background-color: #83ACDE;
  animation: changeBackgroundColor 60s infinite;
}

@keyframes changeBackgroundColor {
  0%,
  24.99%,
  100% {
    background-color: #83ACDE;
  }
  25%,
  49.99% {
    background-color: #EDCA38;
  }
  50%,
  74.99% {
    background-color: #A1B2C3;
  }
  75%,
  99.99% {
    background-color: #3C2B1A;
  }
}

Answer 2

超过数组长度时，您需要“重置” i变量...

const colors = ['#83ACDE','#EDCA38','#A1B2C3','#3C2B1A'];
$(function() { start(0); });
function start(i){
  setTimeout(function(){
    $('body').css("backgroundColor", colors[i]);
    i++;
    if (i >= colors.length) {
      i = 0;
    }
    start(i);
  }, 2000); // Changed to 2 seconds for example
}

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

Answer 3

更简单的方法是在整个数组长度上使用modulo(remainder) operator，就像这样：

start ( (i + 1) % colors.length);

当i + 1等于colors.length时，它不仅会返回0，还会增加。

const colors = ['#83ACDE','#EDCA38','#A1B2C3','#3C2B1A'];
function start(i){
  setTimeout(function(){
    $('body').css("backgroundColor", colors[i]);
    start((i + 1) % colors.length);
  }, 1000); //1 second here to be easier to see
}
start(0);

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

请注意，我也删除了测试if是否为有效索引的i，因为不再需要它。

Answer 4

虽然我也建议您简单地重置i，但是另一种方法是使用模数%，即：

const colors = ['#83ACDE', '#EDCA38', '#A1B2C3', '#3C2B1A'];

function start(i) {
  setTimeout(function() {
    $('body').css("backgroundColor", colors[i]);
    i++;
    start(i % colors.length);
  }, 500); 
}
start(0);

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

Answer 5

您的代码正确，只需要稍作修改即可。

const colors = ['#83ACDE','#EDCA38','#A1B2C3','#3C2B1A'];
const ColorLength=colors.length;
$(document).ready(() => {   start(0);});
 function start(i){
 setTimeout(function(){
  $('body').css("backgroundColor", colors[i]);
 i++;
 if (i >= ColorLength) {
  i = 0;
 }
 start(i);
}, 1000); 
}

Answer 6

在达到i的长度时重置colors：

function start(i){
  if(i < colors.length){
    setTimeout(function(){
      $('body').css("backgroundColor", colors[i]);
      i++;
      if(i == colors.length) { i=0; }
      start(i);
    }, 15000);
  }
}

Answer 7

您的代码存在问题是因为if值超出i数组范围时，colors条件结束了循环。

您可以通过使用模运算符将i的值除以length或数组，然后将其余部分用作索引来解决此问题。您还可以整理逻辑以立即设置第一种背景色。试试这个：

$(document).ready(() => {
  const colors = ['#83ACDE', '#EDCA38', '#A1B2C3', '#3C2B1A'];

  function start(i) {
    $('body').css("backgroundColor", colors[i++ % colors.length]);
    setTimeout(function() { start(i); }, 1000);
  }

  start(0);
});

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

Answer 8

$(document).ready(() => {
const colors = ['#83ACDE', '#EDCA38', '#A1B2C3', '#3C2B1A'];
var index = 0;

function start() {
    setTimeout(function() {
        if (colors.length == index) {
            index = 0;
        }
        $('body').css("backgroundColor", colors[index++]);
        start();
    }, 2000);
}
start();

})

使用setTimeout（）方法在一段时间内更改背景颜色的Javascript函数

8 个答案: