javascript - 重新加载时文本随机播放

Question

这个问题已经有答案了:

Shuffling array JavaScript (5 个回答)

已关闭 10 年前。

<div id="t1"></div>
<div id="t2"></div>

所以在这两个 div 中我想旋转 4 行文本...显然我尝试设置它的方式不起作用，在 t2 div 只是复制 t div 之前...任何想法如何解决这个问题？如果我有另一种聆听方式，我不会精通代码，更多的是复制粘贴调整测试类型的编码...这是一个我试图在我的网站上制作的简单游戏，所以我正在寻找解决方案...

<script type="text/javascript">
var scn = new Array();
scn[0] = "red";
scn[1] = "blue";
scn[2] = "green";
scn[3] = "yellow";
var myRandom = Math.floor(Math.random()*scn.length);
//$(document).ready(function() {
$('#t1').html(scn[myRandom]);
$('#t2').html(scn[myRandom]); 
//});
</script>

Answer 1

如果我正确理解问题陈述，那么您所需要的是洗牌算法的基本变体。您需要起始数组中的两个元素，且无需替换。

最有效的洗牌算法是所谓的 Fisher-Yates 洗牌算法，其复杂度为 n 阶——也就是说，它所花费的时间和空间与您正在处理的元素数量大致成正比和。它的工作原理是获取数组中的随机元素并将其与第一个元素交换；然后，它在数组中第一个元素之后获取一个随机元素，并将其与第二个元素交换；等等。您将获得一个完美的(伪)随机数组，并且每个元素都需要进行一次逻辑运算。

如果对数组进行打乱，然后从中取出前两个元素，则可以将它们呈现在两个 div 中。

Mike Bostocks很好地实现了 Fisher-Yates shuffle:

function shuffle(array) {
  var m = array.length, t, i;

  // While there remain elements to shuffle…
  while (m) {

    // Pick a remaining element…
    i = Math.floor(Math.random() * m--);

    // And swap it with the current element.
    t = array[m];
    array[m] = array[i];
    array[i] = t;
  }

  return array;
}

如果我们通过它运行您的数组 scn，然后将前两个元素放入 div，您就会得到您想要的内容。

<script type="text/javascript">
var scn = ["red", "blue", "green", "yellow"];  // or whatever array, doesn't matter
$(document).ready(function() {
  shuffle(scn);
  $('#t1').html(scn[0]);
  $('#t2').html(scn[1]); 
});

// insert shuffle function code here
</script>

最简单的方法是从 1-4 中随机取两次数字，确保它们不相等，然后以这种方式从数组中提取元素，但如果您打算在游戏中使用此代码，洗牌算法更具可扩展性——只需调整数组的大小和要插入的 div，就可以拥有一组任意大小的集合。