我必须每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>
答案 0 :(得分：2)
这很有帮助。
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);div{
height:50px;
width:50px;
}
span {
display: flex;
} <span>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</span>
答案 1 :(得分：1)
我的解决方案很笨重，但它很有效，我很容易理解（我认为）。它已逐步评论。
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，如果它是一个数组，你有一个更大的属性列表。
<强>段
<!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>
答案 2 :(得分：0)
for-in语句本身并不是一个“不好的做法”，但是它可能被误用，例如，迭代数组或类似数组的对象。
for-in语句的目的是枚举对象属性。这个陈述将在原型链中出现，也可以枚举继承属性，这有时是不可取的。
参考：https://stackoverflow.com/a/4261096/2815301
很好用for index。
答案 3 :(得分：0)
如果我理解正确，你需要改变给定数组中所有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);
答案 4 :(得分：0)
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>
答案 5 :(得分：0)
你不需要为这个提供一些JavaScript：
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;
}
}<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
如果你使用像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)};
}
}