Question

我正在研究一个随机引用/颜色生成器。我希望它避免重复以前的颜色（以简单/容易/可理解的方式，因为我是JS / jQuery中的一个完整的初学者）。

这是我的代码，我不知道它有什么问题。

  var colors = ["#8ee5ee", "#ee82ee", "#469649", "#ff4444", "#ffa500", "#dddddd", "#efc3c8", "#d2d449", "#f91589","#906161","#875d39","#ffdab9","#d1e529","#3a718b"];

  var color = Math.floor(Math.random() * colors.length);

  var lastcolor = 0;

  while(color === lastcolor){
    color = Math.floor(Math.random() * colors.length) + 1;
  }

  $("body").animate({backgroundColor: colors[color]}, 1000);
  $("#new-quote").animate({backgroundColor: colors[color]}, 1000);
  $("h6").fadeOut(1000);
  $("p").fadeOut(1000);

   });
  });

基本上，当我单击按钮（#new-quote）时，当前背景颜色会变为另一种随机颜色，依此类推。但是，当机器选择与当前数字/颜色相同的数字/颜色时，颜色不会随之改变。我试图避免这种情况！

Answer 1

我猜你提供的代码周围有某种循环。然后你不应该重置颜色，而是将它分配给前一个颜色。

var colors = ["#8ee5ee", "#ee82ee", "#469649", "#ff4444", "#ffa500", "#dddddd", "#efc3c8", "#d2d449", "#f91589","#906161","#875d39","#ffdab9","#d1e529","#3a718b"];

var color = Math.floor(Math.random() * colors.length);

while(color === lastcolor){
  color = Math.floor(Math.random() * colors.length) + 1;
}

lastcolor = color;

当然，您应该在脚本的开头定义lastcolor。地方

var lastcolor = 0;

<script>代码打开后

。

Answer 2

你可以只使用一个新的随机值，因为如果你添加一个，如果随机值是最后一个元素的索引，你可能会得到未定义。

while (color === lastcolor){
    color = Math.floor(Math.random() * colors.length); // + 1;
    //                                         without ^^^^^^^ 
}

更好的风格是带有do ... while循环的一个赋值。

var colors = ["#8ee5ee", "#ee82ee", "#469649", "#ff4444", "#ffa500", "#dddddd", "#efc3c8", "#d2d449", "#f91589", "#906161", "#875d39", "#ffdab9", "#d1e529", "#3a718b"],
    color,
    lastcolor = 0;

do {
    color = Math.floor(Math.random() * colors.length);
} while(color === lastcolor);

lastcolor = color;

Answer 3

更简单的方法：使用splice()方法从colors数组中删除当前元素，这样每次运行代码时，先前出现的元素都不会再次出现。

var color = Math.floor(Math.random() * colors.length);

//from index = color, delete that element using splice(index, # of elements to delete)
colors.splice(color, 1);
//now colors array will not contain the colors[color] element

for (var i = 0; i < colors.length; i++) {
    console.log(colors[i]);
}

避免Math.random中先前数字的简单方法？

3 个答案: