需要每3秒更换一次div背景吗？
我必须改变在每3秒的div背景颜色，所以如下面我试图在每3秒.eg color的“红色”索引0改变color数组值将移动到索引1，然后索引1的值移动到索引2 ...所以我设置最后一个索引4始终索引0的值。问题是我没有得到那个新的编辑数组。如何在每次调用color数组值。需要每3秒更换一次div背景吗？
<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>
我的解决方案是笨重，但它的工作原理和我做了很容易跟随（我认为）。它是一步一步评论的。
OP：u能也解释了为什么使用在循环越来越附加价值？
嗯，我读过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>
for-in语句本身并不是一个“坏习惯”，但是它可能被错误地用于例如遍历数组或类似数组的对象。
的换在声明的目的是枚举对象的属性。这个语句将在原型链中继续，并且枚举继承的属性，这有时是不希望的。
裁判：https://*.com/a/4261096/2815301
其良好的使用for index。
如果我理解正确，您需要从给定数组改变所有的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);
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>我认为这是最好的解决方案 - 没有程序代码，所以很容易改变计时;添加，删除或更改颜色。 –
这每亩是有帮助的。
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>感谢您的回答 –
你不需要为这一个有点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>如果您使用的预处理器一样无礼，你可以使这个多一点计划：
$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)};
}
}
检查我的答案，让我知道，如果它帮助。 –