Question

标题在单击时会随机更改颜色，但经常会重复相同的颜色（我不希望它连续两次在数组中重复相同的颜色）。我尝试使用if语句解决此问题，但不确定为什么它不起作用。

i++;           // init statement
while (i++) {  // condition
    j++;       // body of the for loop
    i++;       // iteration expression
}

var title = document.querySelector(".title");

function changeColor() {
  let newArray = ["DarkSalmon", "LightSalmon", "Crimson", "Red",
    "DeepPink", "YellowGreen", "GhostWhite"
  ];
  let random = Math.floor(Math.random() *
    Math.floor(newArray.length - 1));
  console.log(random);
  if (title.style.color !== newArray[random]) {
    title.style.color = newArray[random];
  }

}

title.addEventListener("click", changeColor);

Answer 1

如果不想让颜色连续出现，您可以在else语句中添加一个if语句。

我发现了错误！这是因为您的颜色名称大写了……将它们全部更改为小写字母

var title = document.querySelector(".title");

function changeColor() {
  let newArray = ["darksalmon", "lightsalmon", "crimson", "red", "deeppink", "yellowgreen", "ghostwhite"];
  let random = Math.floor(Math.random() * Math.floor(newArray.length - 1));
  if (title.style.color != newArray[random]) {
    title.style.color = newArray[random];
    console.log(title.style.color);
  } else {
    changeColor();
  }
}

title.addEventListener("click", changeColor);

<h1 class='title'>Berserk</h1>

Answer 2

这将使每种颜色仅被选择一次。使用完所有颜色后，将刷新列表，以便可以再次随机选择所有颜色，依此类推。

// Identifies header element & defines initial colors array and colors array
const header = document.getElementsByClassName("title")[0];
const initialColors = ["DarkSalmon", "LightSalmon", "Crimson", "Red", "DeepPink", "YellowGreen"];
let colors = [];

// Calls `changeColor` when the header is clicked
header.addEventListener("click", changeColor);


// Defines the `changeColor` function
function changeColor(){

  // Remembers the most recent color (formatted as lower-case)
  let previousColor = header.style.color.toLowerCase();

  // Makes all colors available whenever no colors are left (including on first click)
  if(colors.length === 0){

    // Copies the `initialColors` array, and returns the copy
    // (See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice)
    colors = initialColors.slice();
  }
  
  // Cuts a random color out of the colors array
  let newColor = removeRandFrom(colors);

  // If removed color happens to match previous color, forces an additional change
  // (Can only ever happen immediately after the `colors` array has been replenished)
  if(newColor === previousColor){
    newColor = removeRandFrom(colors);
  }

  // Sets text color to whichever color was just randomly removed
  header.style.color = newColor;
}


// Defines the `removeRandFrom` helper function
function removeRandFrom(arr){
  
  // Gets a psuedo-random number
  const index = Math.floor(Math.random() * arr.length);

  // Removes and returns the element at the randomly selected index
  // (See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice)
  return arr.splice(index, 1);
}

<h1 class='title'>Berserk</h1>

参考文献：
MDN - slice
MDN - splice

Answer 3

问题是当颜色重复出现并且您的if语句阻止了这种情况发生时，也什么也没有发生。因此效果与重复的颜色相同。

您可以使用if循环而不是ẁhile语句来随机选择新颜色，直到您拥有与当前颜色不同的颜色为止。

let random;

do {
   random = Math.floor(Math.random() * Math.floor(newArray.length - 1));
} while (title.style.color === newArray[random]);

title.style.color = newArray[random];

如何阻止随机颜色重复？

3 个答案: