HTML / Javascript彩虹背景代码不起作用

我一直在试图看看是否有可能创build一个循环背景,从列表中的一种颜色改变到下一个,按照外观顺序。 (颜色是:红色,橙色,黄色,绿色,蓝色和紫色。)我希望这会工作,并给页面上的“彩虹”型的外观。 我认为混合使用JavaScript和JavaScript是可行的,但它似乎只显示文本,甚至不显示第一个背景变化。

代码是:

<HTML> <HEAD> </HEAD> <BODY> <script> function Red() { bgcolor Red; ColorOrange(); } function Orange() { bgcolor Orange; ColorYellow(); } function Yellow() { bgcolor Yellow; ColorGreen(); } function Green() { bgcolor Green; ColorBlue(); } function Blue() { bgcolor Blue; ColorPurple(); } function Purple() { bgcolor Purple; ColorRed(); } function ColorRed() { setTimeout("Red", 1000); } function ColorOrange() { setTimeout("Orange", 1000); } function ColorYellow() { setTimeout("Yellow", 1000); } function ColorGreen() { setTimeout("Green", 1000); } function ColorBlue() { setTimeout("Blue", 1000); } function ColorPurple() { setTimeout("Purple", 1000); } </script> There is text here, but it's sorta not related to this so I replaced it with this! </BODY> </HTML> 

Solutions Collecting From Web of "HTML / Javascript彩虹背景代码不起作用"

我认为最简单的解决方案是将颜色放入数组中。 您可以简单地遍历数组,并使用setInterval函数每秒更改颜色。

 (function() { // Wrap in a function to not pollute the global scope // Colors. These are the color names you can use in CSS. You could use color codes // like #rrggbb as well. var colors = ['red', 'orange', 'yellow', 'green', 'blue', 'purple']; var colorIndex = 0; setInterval(function(){ // Set the color and increment the index. document.body.style.backgroundColor = colors[colorIndex++]; // Wrap the index if it goes past the length of the array. % is modulo. colorIndex %= colors.length; }, 1000); })(); 

没有必要使用Java。

将此添加到任何标签:

 style="linear-gradient(red,orange,yellow,green,cyan,blue,magenta)"