Question

所以，我知道这可能是一个容易解决的问题，但无论如何......

我试图将其改为可以更改网页背景颜色的位置，如下所示：

red > yellow > green > blue > purple > pink > brown > red

点击here，查看我尝试为我的网页做的网页演示。

我想我可以在body元素上使用一些JavaScript：

＆＃13;

<html>
    <body id="body" bgcolor="#FFFFFF">
         <script>
             var body = document.getElementById('body'); /* Get
             the element with the id of 'body' */
             
             /* I need some javascript to make the 'hex'
             variable change accordingly, then call the setColor() with
             the parameter as a string for the hex code to change the                                    
             background color */
             
             function setColor(hex) {
                body.setAttribute("bgcolor", hex); /* Set the
                attribute bgcolor to the counter variable */
             }
         </script>
    </body>
</html>

＆＃13;

＆＃13; 我只需要将十六进制变量按照我上面所述的顺序进行更改。我需要一个for循环，一个while循环或一些循环来重复更改背景颜色的过程。 setColor（）函数可以轻松更改颜色。有谁知道如何将其实现到网页中？谢谢！

Answer 1

您不需要使用JavaScript来实现此效果。使用CSS动画，您可以创建自己的时髦背景。

.background获取一个名为animation的属性，其名称（在本例中为bg-animation）通过各种颜色循环（并淡化）。您可以在@keyframes中指定动画本身。动画时间设置为10秒，或10s，可以是任何内容。

详细了解animation at MDN。

＆＃13;

.background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  animation: bg-animation 10s infinite;
}

@-webkit-keyframes bg-animation {
  0% {
    background-color: red;
  }
  15% {
    background-color: yellow;
  }
  30% {
    background-color: green;
  }
  45% {
    background-color: blue;
  }
  60% {
    background-color: purple;
  }
  75% {
    background-color: pink;
  }
  90% {
    background-color: brown;
  }
  100% {
    background-color: red;
  }
}

@keyframes bg-animation {
  0% {
    background-color: red;
  }
  15% {
    background-color: yellow;
  }
  30% {
    background-color: green;
  }
  45% {
    background-color: blue;
  }
  60% {
    background-color: purple;
  }
  75% {
    background-color: pink;
  }
  90% {
    background-color: brown;
  }
  100% {
    background-color: red;
  }
}

＆＃13;

<div class="background"></div>

＆＃13;

Answer 2

使用setInterval方法，在回调中随机生成颜色并更新背景。您可以使用CSS transition属性更改颜色时提供转换。可以使用Math.random，Math.floor和Number#toString方法随机生成颜色代码。

如果您想在颜色代码数组之间进行更改，请使用带有计数器变量的数组。

＆＃13;

setInterval(function() {
  document.body.style.backgroundColor = '#' + Math.floor(Math.random() * 16777215).toString(16);
}, 2000)

＆＃13;

body {
  background:red;
  -webkit-transition: background-color 2000ms linear;
  -moz-transition: background-color 2000ms linear;
  -o-transition: background-color 2000ms linear;
  -ms-transition: background-color 2000ms linear;
  transition: background-color 2000ms linear;
}

＆＃13;

如何制作变色背景？

2 个答案: