重新加载时的文本随机播放[重复]

Question

<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，就可以拥有一组任意大小。

Answer 2

以一种非常简单的方式，您可以删除第一个选定的元素：

var scn = [];
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]);
    scn.splice(myRandom, 1); // remove one element at "myRandom" index
    myRandom = Math.floor(Math.random() * scn.length);
    $('#t2').html(scn[myRandom]);
});

Answer 3

漂亮而简单。 demo

var scn = ['red', 'blue', 'green', 'yellow'];

$(function() {
  var rand1 = Math.floor(Math.random() * scn.length),
      rand2 = rand1 === scn.length-1 ? 0 : rand1 + 1;
  $('#t1').html(scn[rand1]);
  $('#t2').html(scn[rand2]);
});

这个想法是rand2 将始终是数组中rand1 之后的“下一个”值

---

有点复杂demo

var scn = ['red', 'blue', 'green', 'yellow'],

getRand = function(check){
  var res = Math.floor(Math.random() * scn.length);
  if(res == check){ return getRand(check); }
  else{ return res; }  
};

$(function() {
  var rand1 = getRand(),
      rand2 = getRand(rand1);
  $('#t1').html(scn[rand1]);
  $('#t2').html(scn[rand2]);
});

我们可以使用递归函数来产生第二个不是第一个的随机数。

Answer 4

var getColor = function() {
  return scn[Math.floor(Math.random()*scn.length)]
}
$('#t1').html(getColor())
$('#t2').html(getColor())