按特定顺序更改背景颜色javascript

我是JavaScript的新手，需要一些帮助。我需要它，以便我的网页背景颜色从#003372变为#FFFFFF，然后以该特定顺序（每1000毫秒）变为#BE2E37，而不会随机产生它们。原因是因为我在我的网站上制作了一部Flash影片，我希望它能与出现的颜色相匹配。按特定顺序更改背景颜色javascript

的JavaScript：

<script type="text/javascript"> 
     function changebackground() { 
      var colors = ["#003372","#FFFFFF","#BE2E37"]; 

     setInterval(function() { 
      var bodybgarrayno = Math.floor(Math.random() * colors.length); 
      var selectedcolor = colors[bodybgarrayno]; 
      document.body.style.background = selectedcolor; 
     }, 2000); 
    } 
    </script>

HTML：

<body onload = changebackground();>

来源

2014-04-05 user3502251

试试这个：

function changebackground() { 
    var colors = ["#003372","#FFFFFF","#BE2E37"], iColor = 0; 

    setInterval(function() { 
     if (iColor > (colors.length - 1)) iColor = 0; 

     var selectedcolor = colors[iColor]; 
     document.body.style.background = selectedcolor; 
     console.log(iColor); 
     iColor += 1; 

    }, 1000); 
}

当达到数组长度的最后，你需要申报和增加在每个区间iColor值，并重新设置为0

Demo

来源

2014-04-05 21:48:58

这可以用CSS来实现

@keyframe changeBackground { 

0%{background-color:#003372;} 

50%{background-color:#FFFFFF;} 

100%{background-color:#BE2E37;} 

} 

#yourbackgrounddiv { 
animation: changeBackground 1s infinte linear; 

}

这会是一个平稳过渡，如果你希望它是一个硬改变你可以给动画标签添加一个“步骤”选项。您还需要供应商特定的前缀。更多信息... http://css-tricks.com/almanac/properties/a/animation/

来源

2014-04-05 21:46:56

function changebackground() { 
    var colors = ["#003372","#FFFFFF","#BE2E37"]; 
    // declare index variable outside of interval enclosure, 
    // so it's value persists between calls 
    var index = 0; 

    setInterval(function() { 
     // magic maths to determine the current index to use... 
     // will be last index plus one, until on last in array 
     // when it will be zero again... 
     index = (index+1)%colors.length; 
     var selectedcolor = colors[index]; 
     document.body.style.background = selectedcolor; 
    }, 1000); 
}

来源

2014-04-05 21:48:12

按特定顺序更改背景颜色javascript

回答

相关问题