javascript css3每2秒改变一次背景颜色

Posted 2023-02-21

【中文标题】javascript css3每2秒改变一次背景颜色

【英文标题】：javascript css3 change background color every 2 seconds

【发布时间】：2014-12-31 10:15:56

【问题描述】：

如何每 2 秒自动更改 html 背景颜色？带有 CSS3 的 HTML5 淡入或淡出？

我尝试将过渡与计时器和 CSS 目标一起使用，但没有成功

input[type=checkbox] 
   position: absolute;
   top: -9999px;
   left: -9999px;


label 
     display: block;
     background: #08C;
     padding: 5px;
     border: 1px solid rgba(0,0,0,.1);
     border-radius: 2px;
     color: white;
     font-weight: bold;


input[type=checkbox]:checked ~ .to-be-changed 
    color: red;

【参考方案1】：

一些更改如果您事先知道颜色和颜色数量，则在现代浏览器中应该可以使用此变体：

.animate-me 
  -webkit-animation: bgcolorchange 4s infinite; /* Chrome, Safari, Opera */ 
  animation: 4s infinite bgcolorchange;

@keyframes bgcolorchange 
  0% 
    background-color: red;
  
  25% 
    background-color: green;
  
  50% 
    background-color: yellow;
  
  75% 
    background-color: yellow;
  
  100% 
    background-color: red;
  

/* Chrome, Safari, Opera */
 @-webkit-keyframes bgcolorchange 
      0%   background: red;
      25%  background: yellow;
      75%  background: green;
      100% background: blue;
 
 

<div class="animate-me">Trippy! Give me a headache!</div>

http://jsfiddle.net/nnw7xza2/1/

点击演示here！

【参考方案2】：

想办法： -css3 -html5 -javascript计时器

var arrColor = ["#45c1bf", "#f0593e", "#aeacd4", "#bdd630", "#4479bd", "#f5b11e"];
var footer = document.getElementById("footer");
var header = document.getElementById("header");
//helper function - get dark or lighter color
function LightenDarkenColor(col, amt) 
    var usePound = false;
    if (col[0] == "#") 
      col = col.slice(1);
      usePound = true;
    
    var num = parseInt(col, 16);
    var r = (num >> 16) + amt;
    if (r > 255) r = 255;
    else if (r < 0) r = 0;
    var b = ((num >> 8) & 0x00FF) + amt;
    if (b > 255) b = 255;
    else if (b < 0) b = 0;
    var g = (num & 0x0000FF) + amt;
    if (g > 255) g = 255;
    else if (g < 0) g = 0;
    return (usePound ? "#" : "") + (g | (b << 8) | (r << 16)).toString(16);
  
  //random new color

function GetNewColor() 
    var index = Math.floor((Math.random() * 5) + 1);
    return arrColor[index];
  
  // set new color

function SetNewColor(color) 
    document.body.style.background = color;
    var NewColor = LightenDarkenColor(color, -20);
    footer.style.backgroundColor = NewColor;
    header.style.backgroundColor = NewColor;
    //footer.style.opacity = 1.2;
  
  // on document load function start
  (function() 
    var colorSelected = GetNewColor();
    SetNewColor(colorSelected);
  )();
//change color timer
window.setInterval(function() 
  var colorSelected = GetNewColor();
  SetNewColor(colorSelected);
, 2000);

* 
  margin: 0;
  padding: 0;

body 
  background: #bdd630;
  transition: background-color 0.5s ease;
  color: #fff;

#header 
  background: #000;
  height: 40px;
  text-align: center;

#content 
  /* Now, to activate scrollbars
         		and compensate #footer height: */
  padding-bottom: 40px;

#footer 
  background: #000;
  position: fixed;
  bottom: 0px;
  width: 100%;
  /* cause of fixed pos */
  height: 40px;
  text-align: center;

<div id="header">header</div>
<div id="content">
  <p>content here</p>
</div>
<div id="footer">footer</div>

享受

【讨论】：

我不明白，既然你一直有答案，为什么还要发布一个寻求帮助的问题？

@Danko 感谢您指出显而易见的事情，我只是认为在发布之前需要进行更多研究。

@Danko，如果您的声誉超过 15 并且已经知道答案，请单击“回答您自己的问题”复选框，请参阅他的代表......

@hod caspi 改为每 2 秒更改一次“声誉”？一分钟后你的逻辑没有回答你自己的问题吗？看来你已经知道答案了

@Danko 谢谢刚开始在这里分享新东西，谢谢大家

【参考方案3】：

如果您正在寻找一种易于理解的方法来执行此操作，请查看Basecacti。当然，Basecacti 目前还不包括将背景嵌入到您自己的 html 页面中，因此只需查看其背后的源代码即可。如果您需要，这里有一个示例：

var clr1 = renderColors("clr1");
    var clr2 = renderColors("clr2");
    var clr3 = renderColors("clr3");
    var speed = renderColors("speed");

    var deb = document.body;
    var circle = 0;
    deb.style.backgroundColor = clr1;

    setInterval(function()
        if (circle == 0) 
            deb.style.backgroundColor = clr2;
            circle = 1;
        
        else if (circle == 1) 
            deb.style.backgroundColor = clr3;
            circle = 2;
        
        else 
            deb.style.backgroundColor = clr1;
            circle = 0;
        
    , speed);

为使这项工作适合您，请将 3 种不同的颜色定义为 clr1、clr2 和 clr3。然后将速度变量设置为2000 2 秒，它应该可以工作。 （在上面的代码中定义这些值的 renderColors 函数是 Basecacti 用来获取用户从不同网页定义的颜色的函数。）另外，Basecacti 目前是开源的，所以你可能想快点访问他们的网站并尽快得到这个代码。如果您只希望背景在 2 秒后更改一次，请将功能从 setInterval 更改为 setTimeout，但不要更改其他任何内容。如果 Basecacti 网站关闭或停止工作，或者我的代码有错误，请评论这篇文章。

【讨论】：

这是 Basecacti 生成背景的example。