Question

我想根据变量值将div的背景从红色更改为绿色。如果var值为1，则背景为红色。但随着价值增加到1000，div背景变得更加绿色。喜欢它通过红色到绿色渐变。我怎么能不使用jQuery呢？

P.S。变量值每2秒增加btw

Answer 1

您可以使用以下方法，将RGB值用于vanilla JS中的颜色。

var INTERVAL = 2, //Change this to 2000 to make it change every 2 seconds
    MAX = 1000, //MAX value
    _r = 255,
    _g = 0;

var i = 1,
    _rPart = (255/MAX),
    _gPart = (128/MAX);
    
var _handler = setInterval(function(){
   
   _r = _r - _rPart;
   _g = _g + _gPart;
   
   document.getElementById("container").style.backgroundColor = "rgb(" + 
                                                                 Math.floor(_r) + 
                                                                 ", " + 
                                                                 Math.floor(_g)
                                                                 + ", 0)";   
   if(i == MAX){    
      clearInterval(_handler);
   }
   
   i++;
   
}, INTERVAL);

#container{
  width: 100px;
  height: 100px;
  background: red;
}

<div id="container">

</div>

Answer 2

假设您有一个带颜色渐变的数组（您可以创建一个here）。

var colorGradient = ['red'...'dark green'];

makeAGradient = function(index) {
  var count = 0;
  var intervalId = window.setInterval(function(){
    $('#my_div').css('background', colorGradient[count]);
    count +=1;
    if (count==index) window.clearInterval(intervalId);
  }, 2000);
}

我会尝试类似上面的代码。

将div的背景从一种颜色更改为另一种颜色，如渐变

2 个答案: