使用Javascipt在浏览器背景颜色之间淡入淡出

<div id="myElement"></div>

var element = document.getElementById("myElement");
var colors = ["#ff0000", "#00ff00", "#0000ff"]; // 设置需要淡入淡出的颜色数组

var currentColor = 0; // 当前颜色的索引

function fadeBackground() {
  var targetColor = colors[currentColor]; // 获取目标颜色
  var currentRGB = element.style.backgroundColor.match(/\d+/g); // 获取当前颜色的RGB值

  // 将当前颜色的RGB值转换为整数
  var r = parseInt(currentRGB[0]);
  var g = parseInt(currentRGB[1]);
  var b = parseInt(currentRGB[2]);

  // 计算颜色的渐变步长
  var stepR = (parseInt(targetColor.substr(1, 2), 16) - r) / 10;
  var stepG = (parseInt(targetColor.substr(3, 2), 16) - g) / 10;
  var stepB = (parseInt(targetColor.substr(5, 2), 16) - b) / 10;

  // 定时改变背景颜色
  var interval = setInterval(function() {
    r += stepR;
    g += stepG;
    b += stepB;

    // 将RGB值转换为十六进制颜色表示
    var newColor = "#" + Math.round(r).toString(16) + Math.round(g).toString(16) + Math.round(b).toString(16);

    // 设置元素的背景颜色
    element.style.backgroundColor = newColor;

    // 判断是否达到目标颜色
    if (r >= parseInt(targetColor.substr(1, 2), 16) && g >= parseInt(targetColor.substr(3, 2), 16) && b >= parseInt(targetColor.substr(5, 2), 16)) {
      clearInterval(interval); // 清除定时器
      currentColor++; // 切换到下一个颜色
      if (currentColor >= colors.length) {
        currentColor = 0; // 如果已经遍历完所有颜色，则重新从第一个颜色开始
      }
      fadeBackground(); // 递归调用函数，实现连续的淡入淡出效果
    }
  }, 100); // 每隔100毫秒改变一次颜色
}

fadeBackground(); // 调用函数，开始淡入淡出效果