javascript - 如何以每个随机数具有不同值的方式在多个位置调用随机数？

Question

所以我想更改 4 个“a”元素背景颜色，并且我想以每种颜色都有一个随机生成的数字的方式使用 rgb 颜色，因此每次调用函数时颜色都会不同。问题是生成的数字没有改变，但在所有元素上使用相同的随机数，所以它的颜色相同。

我可以通过将随机数放入数组并从那里调用随机数来解决这个问题，但这有点复杂。

总结一下:

-我正在寻找一个更紧凑的解决方案来做到这一点

-我还想使用其他方法在每个元素上单独调用此函数...而不是在这种 querySelectorAll 方式中...

希望一切都清楚，感谢您的回答!:)

function changeCol() {
    var colors = document.querySelectorAll(".con a");
    var x =[255,180,45,99,191,11]
    var y =[25,210,67,49,101,22]
    var z =[156,194,55,9,88,33]

    if(x==x2 || y == y2 || z ==z2){

        return;
    } else {

     colors[0].style.backgroundColor ="rgba("+x[Math.ceil(Math.random()*5)]+","+x[Math.ceil(Math.random()*5)]+","+x[Math.ceil(Math.random()*5)]+")";

     colors[1].style.backgroundColor ="rgba("+x[Math.ceil(Math.random()*5)]+","+x[Math.ceil(Math.random()*5)]+","+x[Math.ceil(Math.random()*5)]+")";

     colors[2].style.backgroundColor ="rgba("+x[Math.ceil(Math.random()*5)]+","+x[Math.ceil(Math.random()*5)]+","+x[Math.ceil(Math.random()*5)]+")";

     colors[3].style.backgroundColor ="rgba("+x[Math.ceil(Math.random()*5)]+","+x[Math.ceil(Math.random()*5)]+","+x[Math.ceil(Math.random()*5)]+")";
    }

   x=x2;
   y=y2;
   z=z2;
}

Answer 1

JS Math.random() 返回一个介于 0 和 1 之间的随机数。所以在总是执行 ceil() 之后，您将得到一个介于 0 和 1 之间的随机数它是 1。这就是为什么你总是得到相同的数字。

但是你可以通过设置一个范围来获得随机数

function getRandomInt(max) {
  return Math.floor(Math.random() * Math.floor(max));
}

console.log(getRandomInt(6))

MDN reference .