HTML / Javascript彩虹背景代码不起作用 [英] HTML/Javascript Rainbow Background Code Won't Work
问题描述
我一直试图看看是否有可能创建一个循环背景，按照外观顺序从列表中的一种颜色变为下一种颜色。 （颜色是：红色，橙色，黄色，绿色，蓝色和紫色。）我希望它能起作用，并给页面带来彩虹式的外观。我认为将HTML与JavaScript混合会起作用，但它显然似乎只显示文本，甚至不会显示第一个背景变化。
代码是：
< HTML>
< HEAD>
< / HEAD>
< BODY>
< script>
函数红色（）{
bgcolor红色;
ColorOrange（）;
}
函数Orange（）{
bgcolor Orange;
ColorYellow（）;
}
函数黄色（）{
bgcolor黄色;
ColorGreen（）;
}
函数Green（）{
bgcolor Green;
ColorBlue（）;
}
函数Blue（）{
bgcolor Blue;
ColorPurple（）;
}
函数Purple（）{
bgcolor Purple;
ColorRed（）;
}
函数ColorRed（）
{
setTimeout（Red，1000）;
}
函数ColorOrange（）
{
setTimeout（Orange，1000）;
}
函数ColorYellow（）
{
setTimeout（Yellow，1000）;
函数ColorGreen（）
{
setTimeout（Green，1000）;
函数ColorBlue（）
{
setTimeout（Blue，1000）;
}
函数ColorPurple（）
{
setTimeout（Purple，1000）;
}
< / script>
这里有文字，但它与这不相关，所以我用它替换了它！
< / BODY>
< / HTML>
我认为最简单的解决方案是将颜色在一个数组中。您可以简单地循环访问数组，并使用setInterval函数每秒更改颜色。
（function（）{// Wrap in a函数不污染全局范围//颜色，这些是您可以在CSS中使用的颜色名称，也可以使用颜色代码//如#rrggbb。var colors = ['red'，'orange'，'yellow' ，'green'，'blue'，'purple']; var colorIndex = 0; setInterval（function（）{//设置颜色并增加索引值document.body.style.backgroundColor = colors [colorIndex ++]; //如果索引超过了数组的长度，则将该索引包裹起来。％是模数。colorIndex％= colors.length;}，1000）;}）（）; div>
I have been trying to see if it's possible to create a looping background that changes from one color to the next in a list, in the order of appearance. (The colors are: Red, Orange, Yellow, Green, Blue, and Purple.) I was hoping it would work and give a "rainbow"-type look to the page. I thought mixing HTML with JavaScript would work, but it apparently seems to show nothing but the text, and not even the first background change works.
The code is:
<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>
I think the easiest solution would be to put the colors in an array. You can simply loop through the array and use the setInterval function to change the color each second.
(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);
})();
这篇关于HTML / Javascript彩虹背景代码不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
