此代码如何工作？它使用jQuery创建一个随机的颜色生成器，但是我不懂数学

问题描述

var colors = new Array(
[169,96,238],[255,51,61],[151,255,255],203,87],105,180],);

var step = 0;
//color table indices for: 
// current color left
// next color left
// current color right
// next color right
var colorIndices = [0,1,2,3];

//transition speed
var gradientSpeed = 0.0005;

function updateGradient()
{

if ( $===undefined ) return;

var c0_0 = colors[colorIndices[0]];
var c0_1 = colors[colorIndices[1]];
var c1_0 = colors[colorIndices[2]];
var c1_1 = colors[colorIndices[3]];

var istep = 1 - step;
var r1 = Math.round(istep * c0_0[0] + step * c0_1[0]);
var g1 = Math.round(istep * c0_0[1] + step * c0_1[1]);
var b1 = Math.round(istep * c0_0[2] + step * c0_1[2]);
var color1 = "rgb("+r1+","+g1+","+b1+")";

var r2 = Math.round(istep * c1_0[0] + step * c1_1[0]);
var g2 = Math.round(istep * c1_0[1] + step * c1_1[1]);
var b2 = Math.round(istep * c1_0[2] + step * c1_1[2]);
var color2 = "rgb("+r2+","+g2+","+b2+")";

$('#gradient').css({
background: "-webkit-gradient(linear,left top,right top,from("+color1+"),to("+color2+"))"}).css({
 background: "-moz-linear-gradient(left,"+color1+" 0%,"+color2+" 100%)"});

step += gradientSpeed;
if ( step >= 1 )
{
 step %= 1;
 colorIndices[0] = colorIndices[1];
 colorIndices[2] = colorIndices[3];
 
 //pick two new target color indices
 //do not pick the same as the current one
 colorIndices[1] = ( colorIndices[1] + Math.floor( 1 + Math.random() * (colors.length - 1))) % colors.length;
 colorIndices[3] = ( colorIndices[3] + Math.floor( 1 + Math.random() * (colors.length - 1))) % colors.length;
 
}
}

setInterval(updateGradient,10);

据我所知：

1. 获取充满RGB颜色的数组，然后使用函数updateGradient。
2. 在此函数中，它会创建4个代表每种颜色的变量（不确定为什么为什么要使用colorIndices [0]访问数字0？

在这部分之后，我只是不懂数学，因为如果“ step”为0，它的目的是什么，为什么不让var r1 = c0_0 [0]等？

谢谢！

编辑： 我想我最重要的问题是，我可以简单地复制这段代码，然后使用addEventListener（“ load”，setInterval）将其附加到Box元素上吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）