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

HTML/Javascript Rainbow Background Code Won't Work

本文关键字：代码 不起作用 背景 彩虹 Javascript HTML      更新时间：2023-09-26

我一直在尝试查看是否可以创建一个循环背景，按照出现的顺序在列表中从一种颜色更改为另一种颜色。（颜色为：红色、橙色、黄色、绿色、蓝色和紫色。我希望它能起作用，并为页面提供"彩虹"类型的外观。我认为将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>

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

我写了这个很酷的代码来做到这一点。还有在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>

你可能会喜欢这个

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,body{
            height:100%;
            width:100%;
            padding:0;
            margin:0;
            display: grid;
            grid-auto-flow: column;
        }
    </style>
</head>
<body>
    <script>
        let CI=0;
        let PI=2;
        const saturation = 0;// max 255
        const value = 255;// max 255
        let CC=[saturation,saturation,value];
        for(i=1;i=1;){
            if(CC[CI]<value){
                CC[CI]++;
                var div = document.createElement('div');
                div.id = `${CC[0]},${CC[1]},${CC[2]}`;div.className = "part";
                document.querySelector("body").appendChild(div);
                document.getElementById(`${CC[0]},${CC[1]},${CC[2]}`).setAttribute("style",`background-color:rgb(${CC[0]},${CC[1]},${CC[2]});`);
                document.body.setAttribute("style",`background-color:rgb(${CC[0]},${CC[1]},${CC[2]});`);
            } else if(CC[PI]>saturation){
                CC[PI]--;
                var div = document.createElement('div');
                div.id = `${CC[0]},${CC[1]},${CC[2]}`;div.className = "part";
                document.querySelector("body").appendChild(div);
                document.getElementById(`${CC[0]},${CC[1]},${CC[2]}`).setAttribute("style",`background-color:rgb(${CC[0]},${CC[1]},${CC[2]});`);
                document.body.setAttribute("style",`background-color:rgb(${CC[0]},${CC[1]},${CC[2]});`);
            } else {
                PI=CI;
                if(CI<2){
                    CI++;
                }else{
                    break;
                }
            }
        }
    </script>
</body>
</html>

或者这个

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let CI=0;
        let PI=2;
        const saturation = 0;
        const value = 255;
        let CC=[saturation,saturation,value];
        count=0;
        let loop = setInterval(function(){
            if(CC[CI]<value){
                CC[CI]++;
            } else if(CC[PI]>saturation){
                CC[PI]--;
            } else {
                PI=CI;
                if(CI<2){
                    CI++;
                }else{
                    CI=0;
                }
            }
            document.body.setAttribute("style",`background-color:rgb(${CC[0]},${CC[1]},${CC[2]});`);
        },1);
    </script>
</body>
</html>

相关文章：