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

Question

我一直在尝试看看是否可以创建一个循环背景，该背景按出现顺序在列表中从一种颜色变为另一种颜色。（颜色是：红色、橙色、黄色、绿色、蓝色和紫色。）我希望它能起作用并使页面看起来像 "rainbow"。我认为将 HTML 与 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>

Answer 1

我认为最简单的解决方案是将颜色放入数组中。您可以简单地遍历数组并使用 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);
})();

Answer 2

不需要使用Java。

将此添加到任何标签：

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

Answer 3

我写了这段很酷的代码来做到这一点。还有 on github.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Rainbow Background</title>
</head>
<body>
    <script>
        let r = 255
        let g = 0
        let b = 0
        
        function rgb(r, g, b){
            return "rgb("+r+","+g+","+b+")"
        }
        
        function myTimer () {
            if (r < 255 && g == 0 && b == 0) {
                r++
            } else if (r == 255 && g < 255 && b == 0) {
                g++
            } else if (r > 0 && g == 255 && b == 0) {
                r--
            } else if (r == 0 && g == 255 && b < 255) {
                b++
            } else if (r == 0 && g > 0 && b == 255) {
                g--
            } else if (r < 255 && g == 0 && b == 255) {
                r++
            } else if (r == 255 && g== 0 && b > 0) {
                b--
            }
            document.body.style.backgroundColor = rgb(r, g, b)
        }
        
        setInterval(myTimer, 10)
    </script>
</body>
</html>

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

HTML/Javascript Rainbow Background Code Won't Work

html

javascript

windows