Javascript 需要每3秒更改一次div背景吗？_Javascript_Jquery_Html_Css

Javascript 需要每3秒更改一次div背景吗？

javascript jquery html css

Javascript 需要每3秒更改一次div背景吗？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我必须每3秒钟更改一次div背景色，因此我尝试每3秒钟更改color数组值。例如，“red”的color索引0将移动到索引1，然后索引1的值移动到索引2…所以我将最后一个索引4设置为始终索引0的值。问题是我没有得到新的编辑数组。如何在每次调用时编辑color数组值 <style type="text/css"> div { width: 100%; height: 20%; position: relative; background: #fff;

我必须每3秒钟更改一次div背景色，因此我尝试每3秒钟更改

color

数组值。例如，“red”的

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>


div{
宽度：100%；
身高：20%；
位置：相对位置；
背景：#fff；
}
var div=document.getElementsByTagName（“div”）；
var color=[“红色”、“绿色”、“粉色”、“蓝色”、“浅蓝色”]；
函数更改（）{
for（颜色为var i）{
var j=parseInt（i）；
j！==4？颜色[j+1]。键=颜色[j]：颜色[0]。键=颜色[j]；
}
changediv（）；
}
函数changediv（）{
对于（变量d=0；d

for in语句本身并不是一种“坏习惯”，但是它可能被误用，例如，在数组或类似数组的对象上进行迭代

for in语句的目的是枚举对象属性。这条语句将在原型链中出现，也会枚举继承的属性，这有时是不需要的

参考：

使用

作为索引很好，如果我理解正确，您需要更改给定数组中所有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);

var divs=document.getElementsByTagName（“div”）；
var color=[“红色”、“绿色”、“粉色”、“蓝色”、“浅蓝色”]；
var指数=0
功能更改（）{
对于（变量d=0；d

div{
宽度：100%；
身高：20%；
位置：相对位置；
背景：#fff；
动画：我的第一个12秒；
-moz动画：myfirst 12s infinite；/*Firefox*/
-webkit动画：myfirst 12s infinite；/*Safari和Chrome*/
}
@-moz为myfirst/*Firefox设置关键帧*/
{
0%{背景：红色；}
25%{背景：绿色；}
50%{背景：粉红色；}
75%{背景：蓝色；}
100%{背景：浅蓝色；}
}
@-webkit关键帧myfirst/*Firefox*/
{
0%{背景：红色；}
25%{背景：绿色；}
50%{背景：粉红色；}
75%{背景：蓝色；}
100%{背景：浅蓝色；}
}

1
2.
3.
4.
5
这可能会有帮助

var divs=document.getElementsByTagName（“div”）；
var color=[“红色”、“绿色”、“粉色”、“蓝色”、“浅蓝色”]；
var指数=0；
var-divIndex=0；
功能更改（）{
对于（变量i=0；i
div{
高度：50px；
宽度：50px；
}
跨度{
显示器：flex；
}
我的解决方案很笨重，但它很有效，而且我让它很容易遵循（我想）。这是一步一步的评论
OP：你能解释一下为什么在循环中使用for会得到额外的值吗
我已经读到，in的循环应该用于遍历对象，因为不能保证结果的顺序正确。因此，如果在
中使用for对数组进行迭代，这基本上会使数组类似于对象，但不太有用，因为数组的基本优点之一是它的有序索引
当您获得一个额外的值时，这是因为for in
将解释一个数组，不仅给出它的内容：0,1,2,3,4，
，而且它还将枚举属性：length，item，callItem
。我不知道在什么情况下你需要把这些事情搞砸。实际上，div只是一个节点列表，如果它是一个数组，则会有一个更大的属性列表

片段


div{
宽度：100%；
高度：20vh；
边框：1px实心#fff；
背景:#555；
}
1.
2.
3.
4.
5.
//声明颜色数组
var color=[“红色”、“绿色”、“粉色”、“蓝色”、“浅蓝色”]；
//函数接受一个参数
函数填充（颜色）{
//收集所有div并制作节点列表
var divList=document.querySelectorAll（'div'）；
//将节点列表设置为数组
var divArray=Array.prototype.slice.call（divList）；
//遍历divArray
对于（var i=0；i
您不需要