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 shuffle，它具有order-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())

文本随机重装

4 个答案: