如何每隔一段时间更改我网站的背景颜色

how to change background color of my website on an interval

本文关键字：网站 背景 颜色 何每隔 一段时间      更新时间：2023-09-26

今天我访问了这个网站，它看起来很棒，根据我尝试搜索changebackground()但找不到的时间更改背景颜色的功能，请告诉我该怎么做。

在每个

间隔调用上。 

setInterval(intr,2000);
function intr()
{
document.body.style.backgroundColor="#colorInHex";
}

注意 我已经编辑了这篇文章以通过引用调用间隔函数。参见道格拉斯·克罗克福德（Douglas Crockford）的《邪恶的邪恶》（The Evils of eval），以获得更全面的解释。

CSS Animation：

CSS Animation 目前在除 Opera Mini 之外的所有浏览器上都受支持。它利用硬件加速，并且优于JavaScript动画。 事实上，jQuery动画尝试使用CSS3动画，如果浏览器不支持它，则回退到JS。

你可以从字面上获取此代码并将其放入。在这里看小提琴。

body {
  animation: colorchange 50s; /* animation-name followed by duration in seconds*/
     /* you could also use milliseconds (ms) or something like 2.5s */
  -webkit-animation: colorchange 50s; /* Chrome and Safari */
}
@keyframes colorchange
{
  0%   {background: red;}
  25%  {background: yellow;}
  50%  {background: blue;}
  75%  {background: green;}
  100% {background: red;}
}
@-webkit-keyframes colorchange /* Safari and Chrome - necessary duplicate */
{
  0%   {background: red;}
  25%  {background: yellow;}
  50%  {background: blue;}
  75%  {background: green;}
  100% {background: red;}
}

您引用的网站使用 10 秒的过渡，所以我取了颜色的数量 （5） 并将其乘以 10 秒，得出动画持续时间为 50 秒。

然后

你取步数或颜色（5）减去1（对于0%），所以现在是4，然后把100除以它，所以25。 这为您提供了步距，因此从 0-100% 有 5 步：0%、25%、50%、75%、100%。

由于请求非常简单，我只使用了颜色名称。它们不是特定的，并且对浏览器/操作系统解释开放。如果需要更具体的颜色，可以使用此颜色生成器并将颜色名称替换为这些值之一。

原答案：

CSS 过渡：

本网站使用 CSS 过渡。 有一个声明：

* {
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;
  }

然后定义一些颜色类，例如：

.green {
    background-color: rgba(0,255,0,1);
}
.red {
    background-color: rgba(255,0,0,1);
}
.blue {
    background-color: rgba(0,0,255,1);
}

然后你在 body 标签上设置不同的类，这将导致这样的过渡，因为你最初定义的过渡 CSS

编辑：我说错了，稍微。 这是正文标签上的实际过渡： 

transition: all 10s ease-in-out;

当然，正文上的 CSS 颜色是在计时器上使用 JS 设置的，但这是一个微不足道的操作，CSS 会完成大部分工作，您可以通过简单地设置类比直接使用 script 设置 bg 颜色来更优雅地完成。

<head>
<script type="text/javascript" language="javascript">

/* Method To Generate Random Numbers Between "0-255" for RGB Color-code Format & Assign To Body-Backgrond-Style */
function bgDisco()
{
var  x =Math.round(255*Math.random());
var num1 =getHex(x);
var  y =Math.round(255*Math.random());
var num2 =getHex(y);
var  z =Math.round(255*Math.random());
var num3 =getHex(z);
document.body.style.background="#"+num1+num2+num3;
setTimeout("bgDisco",1000);
}
/* Method To Convert  Decimal To Hexadecimal */
function getHex(dec)
{
var hexArray = new Array( "0", "1", "2", "3","4", "5", "6", "7","8", "9", "A", "B","C", "D", "E", "F" );
var code1 = Math.floor(dec / 16);
var code2 = dec - code1 * 16;
var decToHex = hexArray[code2];
return (decToHex);
}
</script>
</head>

现在在正文部分调用 "bgDisco（）" 在 onload 事件中。

<body onload="bgDisco()">

这是我正在寻找的： 

<style>
body {
    background: #fff;
    background-color: rgb(145, 207, 161);
    font-family: 'Raleway', sans-serif;
    transition: all 10s ease-in-out;
}
* {
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
</style><script type="text/javascript">
function cb()
{
var c = "#1abc9c #2ecc71 #3498db #ea5b4d #9b59b6 #34495e #16a085 #27ae60 #2980b9 #8e44ad #2c3e50 #f1c40f #e67e22 #e74c3c #f39c12 #d35400 #c0392b #06b3db #4ed486 #6139f6 #e3b63d #dc3d66 #bd3559 #bd54cd #0082c8 #16528e #e54b4b #a2c5bf #167c80 #72616e #e8846b #ea5b4d #72BDC2".split(" ");
var d = Math.floor(Math.random() * c.length); 
d = c[d];
document.body.style.background=d;
setTimeout("cb()",1000);}
</script>
<body onload="cb()">

如果你看一下页面的代码，你会看到这个：

<body onload="prettyPrint(); changebackground();" id="main">

我将挖掘一个我将在这里发布 changebackground（） 函数。我想这就是你想要的。

相关文章：