按特定順序更改背景顏色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

回答

相關問題