JS 代码实现缓慢的彩色渐变背景动画

// 定义一个颜色数组 var colors = [ '#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#00FFFF', '#FF00FF', '#C0C0C0', '#808080', '#800000', '#808000', '#008000', '#800080', '#008080', '#000080', '#FFFFFF', '#000000' ];

// 函数获取数组中的随机颜色 function getRandomColor() { var randomIndex = Math.floor(Math.random() * colors.length); return colors[randomIndex]; }

// 函数改变文档的背景颜色 function changeBackgroundColor() { var color1 = getRandomColor(); var color2 = getRandomColor(); var gradient = 'linear-gradient(to right, ' + color1 + ', ' + color2 + ')'; document.body.style.background = gradient; }

// 每 5 秒钟调用一次 changeBackgroundColor 函数 var interval = setInterval(function() { changeBackgroundColor(); }, 1000);

// 函数动画渐变颜色 function animateGradient() { var currentColor = 0; var gradientInterval = setInterval(function() { currentColor++; if(currentColor == colors.length) { currentColor = 0; } var color1 = colors[currentColor]; var color2 = colors[(currentColor + 1) % colors.length]; var gradient = 'linear-gradient(to right, ' + color1 + ', ' + color2 + ')'; document.body.style.background = gradient; }, 100); }

// 5 秒钟后调用 animateGradient 函数 setTimeout(function() { clearInterval(interval); animateGradient(); }, 5000);

这段代码添加了一个名为“animateGradient”的新函数，该函数使用 setInterval 以每 100 毫秒的速度缓慢动画背景颜色渐变。该函数使用 setTimeout 在 5 秒钟后启动并清除用于每秒更改背景颜色的原始间隔。animateGradient 函数循环遍历数组中的每种颜色，并每 100 毫秒创建一个新的渐变。