javascript - 使用javascript更改动画背景中的渐变颜色

Question

我正在尝试向我的网站添加一个按钮，该按钮将更改线性渐变动画中的两种渐变颜色之一。该动画当前正在工作并在我的网站后台运行。

动画 JavaScript 看起来像这样

var angle = 0 

var changeBackground = function (){
angle = angle + 1

document.body.style.backgroundImage = "linear-gradient(" + angle +"deg, #000000, #666"
requestAnimationFrame(changeBackground)
}

changeBackground ()

我想添加这个 html 按钮。当您单击它时，上面动画中的颜色 #666 会切换为 #d22c1f。

<button class="Btn" id="myBtn">Click</button>

我发现这个“https://codepen.io/Chrono79/pen/YxyJqw”非常接近，但我在将此代码实现到我的动画中时遇到问题。另外，我只是希望它在两种颜色之间切换，在本例中它会生成随机 RGB 颜色。

Answer 1

按钮上的颜色变量和事件监听器，您可以在两种颜色之间切换

堆栈片段

var angle = 0, color = "#666";

var changeBackground = function() {
  angle = angle + 1
  document.body.style.backgroundImage = "linear-gradient(" + angle + "deg, #000000, " + color;
  requestAnimationFrame(changeBackground)
}

changeBackground()

document.querySelector('#myBtn').addEventListener('click', function () {
  color = (color != "#666") ? "#666" : "#d22c1f";
})

<button class="Btn" id="myBtn">Click</button>