是否需要每3秒更改div背景？
[英]Need to change div background every 3 seconds?
问题描述
I have to change div background color in every 3 seconds ,so as below I tried to change color array value in every 3 seconds .eg color index 0 of "red" will move to index 1,then index 1 value move to index 2...So I set last index 4 to always index 0 of value.The problem is that I didn't get that new edit array.How to edit color array value in every times called. 
我必须每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>
6 个解决方案
解决方案1
2 2016-02-27 04:20:12
This mus be helpful. 这将有所帮助。
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>
And a Working Jsfiddle 和一个工作的
解决方案2
1 已采纳 2016-02-27 05:08:52
My solution is clunky but it works and I made it easy to follow (I think). 我的解决方案比较笨拙，但可行，而且我很容易遵循（我认为）。 It's commented step by step. 逐步评论。
OP: can u also explain why using for in loop is getting additional value? OP： 您还能解释为什么在for循环中使用会获得附加值吗？
Well I've read that for in loops should be used to iterate through objects because there's no guarantee that the result will be in the correct order. 好吧，我读过for in循环应该用于遍历对象，因为无法保证结果的顺序正确。 So if you use for in to iterate through an array, most likely it'll return in a different order which basically makes an array like an object but less useful since one of the fundamental strength of an array is it's ordered index. 因此，如果使用for in遍历数组，则很有可能它将以不同的顺序返回，这基本上使数组像对象一样，但用处不大，因为数组的基本优势之一是它的有序索引。
When you are getting an extra value, it's because for in will interpret an array and not only give you it's contents: 0,1,2,3,4, but it'll enumerate properties as well: length,item,callItem . 当您获得额外的值时，因为for in会解释一个数组，不仅会给您它的内容： 0,1,2,3,4,而且还会枚举属性： length,item,callItem 。 I don't know any circumstances when you need all of that mucking things up. 我不知道什么情况下您需要将所有这些东西都弄糟。 Actually, div is just a NodeList, if it was an array, you'd have a bigger list of properties. 实际上，div只是一个NodeList，如果它是一个数组，则将具有更大的属性列表。
Snippet 片段
<!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>
解决方案3
0 2016-02-27 03:26:11
The for-in statement by itself is not a "bad practice", however it can be mis-used, for example, to iterate over arrays or array-like objects. for-in语句本身并不是一个“坏习惯”，但是，例如，它可能会被误用于遍历数组或类似数组的对象。
The purpose of the for-in statement is to enumerate over object properties. for-in语句的目的是枚举对象属性。 This statement will go up in the prototype chain, also enumerating over inherited properties, a thing that sometimes is not desired. 该语句将出现在原型链中，还会枚举继承的属性，这有时是不希望的。
ref: https://stackoverflow.com/a/4261096/2815301 参考： https : //stackoverflow.com/a/4261096/2815301
Its good to use for index . 它很好地for index 。
解决方案4
0 2016-02-27 03:53:29
If I understood correctly you need to change color of all div's from the given array. 如果我理解正确，则需要更改给定数组中所有div的颜色。
Following can work 以下可以工作
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);
解决方案5
0 2016-02-27 04:07:41
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>
解决方案6
0 2016-02-27 06:18:47
You don't need a bit of JavaScript for this one: 您无需为此使用一点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>
If you use a pre-processor like Sass, you can make this a little more programmatic: 如果使用像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)};
}
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.