[英]Need to change div background every 3 seconds?
我必须每3秒更改div背景颜色，因此如下所示，我尝试每3秒更改color数组值。例如，“红色”的color索引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>
这将有所帮助。
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>
和一个工作的
我的解决方案比较笨拙，但可行，而且我很容易遵循（我认为）。 逐步评论。
OP： 您还能解释为什么在for循环中使用会获得附加值吗？
好吧，我读过for in循环应该用于遍历对象，因为无法保证结果的顺序正确。 因此，如果使用for in遍历数组，则很有可能它将以不同的顺序返回，这基本上使数组像对象一样，但用处不大，因为数组的基本优势之一是它的有序索引。
当您获得额外的值时，因为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语句本身并不是一个“坏习惯”，但是，例如，它可能会被误用于遍历数组或类似数组的对象。
for-in语句的目的是枚举对象属性。 该语句将出现在原型链中，还会枚举继承的属性，这有时是不希望的。
参考： https : //stackoverflow.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>
您无需为此使用一点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)};
}
}
JavaScript，如何每隔x秒更改div标签的背景
[英]JavaScript, How to change the background of a div tag every x seconds
如何在jQuery中每X秒更改div背景颜色无效？
[英]How to change a div background colour every X seconds in jQuery without effect?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.