Question

我一直试图看看是否可以按照外观的顺序创建一个循环背景，该背景在列表中从一种颜色变为另一种颜色。（颜色是：红色，橙色，黄色，绿色，蓝色和紫色。）我希望它可以工作，并给页面一个彩虹＆＃34;型外观。我认为将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函数每秒更改颜色。

＆＃13;

(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);
})();

＆＃13;

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彩虹背景代码将无法正常工作

3 个答案: