需要每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>

來源

2016-02-27 David JorHpan

檢查我的答案，讓我知道，如果它幫助。 –

我的解決方案是笨重，但它的工作原理和我做了很容易跟隨（我認爲）。它是一步一步評論的。

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，如果它是一個數組，你會擁有一個更大的屬性列表。

Plunker

片段

<!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>

來源

2016-02-27 05:08:52 zer00ne

for-in語句本身並不是一個「壞習慣」，但是它可能被錯誤地用於例如遍歷數組或類似數組的對象。

的換在聲明的目的是枚舉對象的屬性。這個語句將在原型鏈中繼續，並且枚舉繼承的屬性，這有時是不希望的。

裁判：https://stackoverflow.com/a/4261096/2815301

其良好的使用for index。

來源

2016-02-27 03:26:11 yogendra689

如果我理解正確，您需要從給定數組改變所有的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);

來源

2016-02-27 03:53:29 JagsSparrow

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>

來源

2016-02-27 04:07:41 vijay

我認爲這是最好的解決方案 - 沒有程序代碼，所以很容易改變計時;添加，刪除或更改顏色。 –

這每畝是有幫助的。

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>

而一個Working Jsfiddle

來源

2016-02-27 04:20:12

感謝您的回答 –

你不需要爲這一個有點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)}; 
    } 
}

來源

2016-02-27 06:18:47

需要每3秒更換一次div背景嗎？

回答

相關問題