Question

我必须每3秒更改一次div背景颜色，所以如下所示我尝试每隔3秒更改color数组值.eg color“red”的索引0将移至索引1，然后索引1值移动到索引2 ...所以我设置最后一个索引4总是索引0的值。问题是我没有得到那个新的编辑数组。如何编辑color数组值每次都叫。

<style type="text/css">
 div {
    width: 100%;
    height: 20%;
    position: relative;
    background: #fff;
     }
</style>
<body>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>

 <script>
       var div = document.getElementsByTagName("div");
       var color = ["red","green","pink","blue","lightblue"];
       function change(){
          for(var i in color){
             var j = parseInt(i);
             j !== 4 ? color[j+1].Key = color[j] : color[0].Key = color[j];
          }
       changediv();
      }
      function changediv () {
        for(var d = 0 ; d < div.length; d ++){
                 div[d].style.background = color[d];
            }
        //can u also explain why using for in loop is getting additional value .see console.log output
        //for(var i in div){
        //         div[i].style.background = color[i];
        //  console.log(i); // 0,1,2,3,4,length,item,callItem   
        //    }
      }

     setInterval(change,3000);
</script>

Answer 1

这很有帮助。

＆＃13;

var divs = document.getElementsByTagName("div");
var color = ["red","green","pink","blue","lightblue"];
var colorIndex = 0;
var divIndex  = 0;

function change (){
   for(var i = 0 ; i < divs.length; i ++){
                 divs[divIndex].style.background = color[colorIndex];
                  colorIndex++;
                  colorIndex = (colorIndex == color.length?0:colorIndex);
                  divIndex++;
                  divIndex = (divIndex == divs.length?0:divIndex); 
            }  
          divIndex++;
          divIndex = (divIndex == divs.length?0:divIndex); 
}

setInterval(change,1000);

＆＃13;

div{
  height:50px;
  width:50px;
}

span {
  display: flex;
}

＆＃13;

 <span>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 </span>

＆＃13;

和Working Jsfiddle

Answer 2

我的解决方案很笨重，但它很有效，我很容易理解（我认为）。它已逐步评论。

OP：还可以解释为什么使用for循环获得额外的价值？

我已经读过for in循环应该用于迭代对象，因为不能保证结果的顺序正确。因此，如果你使用for in迭代一个数组most likely it'll return in a different order，它基本上使数组像一个对象但不太有用，因为数组的基本优势之一是它的有序索引。

当您获得额外的价值时，因为for in会解释一个数组，而不仅仅是为您提供内容：0,1,2,3,4,，但它会枚举属性也是：length,item,callItem。当你需要所有这些糟糕的东西时，我不知道任何情况。实际上，div只是一个NodeList，如果它是一个数组，你有一个更大的属性列表。

Plunker

<强>段

＆＃13;

<!DOCTYPE html>
<html>

  <head>
 <style>
 div {
   width: 100%;
   height: 20vh;
   border: 1px solid #fff;
   background: #555;
 }
 </style>
  </head>

  <body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    
    <script>
      //Declare color Array
      var color = ["red","green","pink","blue","lightblue"]; 
      
    //Function takes one argument
    function fill(color) {
      
      //Collect all divs and make a NodeList
      var divList = document.querySelectorAll('div');
      
      //Make the NodeList an Array
      var divArray = Array.prototype.slice.call(divList);
        
        //Iterate through divArray
        for(var i = 0; i < divArray.length; i++) {
          
          //Each iteration of divArray is matched to an element of color
          var div = divArray[i];
          var bg = color[i];
          
          //Set each background of div to the corresponding color in color Array
          div.style.backgroundColor = bg;
        }
      }
    

    setInterval(function() {

      
        //Call fill with the given Array color
        fill(color);
        
        //x is the last element of color Array
        var x = color[4];
      
        //Remove x from the back of color Array 
        color.pop(x);
      
        //Place x to the front of color Array 
        color.unshift(x);
      
      //Do it again in 3 seconds
    }, 3000);  
    
    </script>
  </body>

</html>

＆＃13;

Answer 3

for-in语句本身并不是一个“不好的做法”，但是它可能被误用，例如，迭代数组或类似数组的对象。

for-in语句的目的是枚举对象属性。这个陈述将在原型链中出现，也可以枚举继承属性，这有时是不可取的。

参考：https://stackoverflow.com/a/4261096/2815301

很好用for index。

Answer 4

如果我理解正确，你需要改变给定数组中所有div的颜色。

以下可以工作

var divs = document.getElementsByTagName("div");
var color = ["red","green","pink","blue","lightblue"];
var index = 0

function change (){
   for(var d = 0 ; d < divs.length; d ++){
                 divs[d].style.background = color[index];
            }
    index++;
    index = index === color.length?0:index;
}

setInterval(change,3000);

Answer 5

div {
    width: 100%;
    height: 20%;
    position: relative;
    background: #fff;
    animation:myfirst 12s;
   -moz-animation:myfirst 12s infinite; /* Firefox */
   -webkit-animation:myfirst 12s infinite; /* Safari and Chrome */
  }


  @-moz-keyframes myfirst /* Firefox */
{
0%   {background:red;}
25%  {background:green;}
50%   {background:pink;}
75%   {background:blue;}
100%   {background:lightblue;}
}
 
    @-webkit-keyframes myfirst /* Firefox */
{
0%   {background:red;}
25%  {background:green;}
50%   {background:pink;}
75%   {background:blue;}
100%   {background:lightblue;}
}

 <div>1</div>
 <div>2</div>
 <div>3</div>
 <div>4</div>
 <div>5</div>

Answer 6

你不需要为这个提供一些JavaScript：

＆＃13;

div {
  animation: cycle-colors 15s steps(1, end);
  -moz-animation: cycle-colors 15s steps(1, end) infinite;
  -webkit-animation: cycle-colors 15s steps(1, end) infinite;
}
@-moz-keyframes cycle-colors {
  0% {
    background: red;
  }
  20% {
    background: green;
  }
  40% {
    background: pink;
  }
  60% {
    background: blue;
  }
  80% {
    background: lightblue;
  }
}
@-webkit-keyframes cycle-colors {
  0% {
    background: red;
  }
  20% {
    background: green;
  }
  40% {
    background: pink;
  }
  60% {
    background: blue;
  }
  80% {
    background: lightblue;
  }
}

＆＃13;

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>

＆＃13;

如果你使用像Sass这样的预处理器，你可以使它更具程序性：

$colors: (
  red,
  green,
  pink,
  blue,
  lightblue
);
$colors-length: length($colors);
$frame-duration: 3s;
$animation-duration: $frame-duration * $colors-length;

div {
  animation:cycle-colors $animation-duration steps(1, end);
 -moz-animation:cycle-colors $animation-duration steps(1, end) infinite;
 -webkit-animation:cycle-colors $animation-duration steps(1, end) infinite;
}


@-moz-keyframes cycle-colors {
  @for $i from 1 through $colors-length {
    $stop: 100 / $colors-length * ($i - 1) + 0%;
    #{$stop} { background: nth($colors, $i)};
  }
}

@-webkit-keyframes cycle-colors { 
  @for $i from 1 through $colors-length {
    $stop: 100 / $colors-length * ($i - 1) + 0%;
    #{$stop} { background: nth($colors, $i)};
  }
}

需要每3秒更改一次div背景吗？

6 个答案: