Question

我试图做到这一点，以便在加载页面时，菜单div中的字体颜色从数组中更改为随机颜色。这是我的代码：

var red = [0, 100, 63];
var orange = [40, 100, 60];
var green = [75, 100, 40];
var blue = [196, 77, 55];
var purple = [280, 50, 60];

var letterColors = [red, orange, green, blue, purple];

var textToColour = document.getElementsByClassName("menuItem");

function changeColour() {
  for (let i = 0; i < textToColour.length; i++) {
    textToColour[i].style.color = letterColors[Math.floor(Math.random() * letterColors.length)];
    console.log("Check");
  }
}

window.addEventListener('load', changeColour);

<div class='menuItem'>
  item1
</div>

<div class='menuItem'>
  item2
</div>

<div class='menuItem'>
  item3
</div>

有人看到我要去哪里了吗？

Answer 1

编辑：颜色的格式错误，请看下面的

var red = 'rgb(0, 100, 63)';
var orange = 'rgb(40, 100, 60)';
var green = 'rgb(75, 100, 40)';
var blue = 'rgb(196, 77, 55)';
var purple = 'rgb(280, 50, 60)';

var letterColors = [red, orange, green, blue, purple];

var textToColour = document.getElementsByClassName("menuItem");

function changeColour() {
  for (let i = 0; i < textToColour.length; i++) {
    textToColour[i].style.color = letterColors[Math.floor(Math.random() * letterColors.length)];
  }
}

window.addEventListener('load', changeColour);

<div class='menuItem'>
  Item 1
</div>

<div class='menuItem'>
  Item 2
</div>

<div class='menuItem'>
  Item 3
</div>

const textToColour = document.getElementsByClassName('menuItem');

const letterColors = [
  'red',
  'blue',
  'yellow',
  'orange',
];

function changeColour() {
  Array.from(textToColour).forEach((x) => {
    const randomIndex = Math.floor(Math.random() * letterColors.length);

    x.style.color = letterColors[randomIndex];
  });
}

window.addEventListener('load', changeColour);

<div class='menuItem'>
  Baguette
</div>

<div class='menuItem'>
  Petit pain
</div>

<div class='menuItem'>
  Croissant
</div>

Answer 2

我认为，您的随机值类似于htmlcolor格式（＃123456），但某些颜色代码包含字母。可能是您将创建随机字母和数字。

Answer 3

您使用的是rgb颜色，因此请使用'rgb('+...+')'

var red = [0, 100, 63];
var orange = [40, 100, 60];
var green = [75, 100, 40];
var blue = [196, 77, 55];
var purple = [280, 50, 60];

var letterColors = [red, orange, green, blue, purple];

    var textToColour = document.getElementsByClassName("menuItem");

function changeColour() {
  for(let i = 0; i < textToColour.length; i++) {
    textToColour[i].style.color = 'rgb('+ letterColors[Math.floor(Math.random() *      letterColors.length)]+')';
    
  }
}

window.addEventListener('load', changeColour);

<div class='menuItem'>
  try me
</div>

Answer 4

只需在现有代码段的颜色代码之前添加rgb即可。这应该工作：）

var textToColour = document.getElementsByClassName("menuItem");
var red = [0, 100, 63];
var orange = [40, 100, 60];
var green = [75, 100, 40];
var blue = [196, 77, 55];
var purple = [280, 50, 60];

var letterColors = ['rgb('+red+')', 'rgb('+orange+')', 'rgb('+green+')', 'rgb('+blue+')', 'rgb('+purple+')'];

function changeColour() {
  for(let i = 0; i < textToColour.length; i++) {
    textToColour[i].style.color =  letterColors[Math.floor(Math.random() * letterColors.length)];
  }
}

window.addEventListener('load', changeColour);

<div class="menuItem">Item 1</div>
<div class="menuItem">Item 2</div>
<div class="menuItem">Item 3</div>
<div class="menuItem">Item 4</div>
<div class="menuItem">Item 5</div>
<div class="menuItem">Item 6</div>
<div class="menuItem">Item 7</div>
<div class="menuItem">Item 8</div>

Answer 5

这就是我将其更改为的方法，并且效果很好。我犯了为每种颜色添加变量的错误。实际上，我从另一个代码片段中获得了我认为可以用于此功能的代码。

这是功能代码：

var textColors = ["red", "orange", "green", "blue", "purple"];

var textToColour = document.getElementsByClassName("menuItem");

function changeColour() {
 for(let i = 0; i < textToColour.length; i++) {
  textToColour[i].style.color =  textColors[Math.floor(Math.random() *    letterColors.length)];
console.log("Check");
 }
}

window.addEventListener('load', changeColour);

Answer 6

使用document.body.addEventListener('DOMContentLoaded', namefunc()); 等待DOMContentLoaded是加快网页浏览速度的最佳做法

var arrColor= ['red','blue','green','yellow','purple'];
var el = document.getElementsByClassName("item");

function randColor() {
  for(let i = 0; i < el.length; i++) {
    el[i].style.color = arrColor[Math.floor(Math.random() * arrColor.length)];
  }
}

   document.body.addEventListener('DOMContentLoaded', randColor());

<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>

在divs中随机化字体颜色

6 个答案: