[英]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.