使用 javascript 打乱的整数来填充连续的 html 区域答案

【问题标题】：using javascript shuffled integers to populate sequential html areas使用 javascript 打乱的整数来填充连续的 html 区域
【发布时间】：2011-11-10 14:35:44
【问题描述】：

我正在尝试使用随机排序的内容更改顺序 div 的内容。效果不太好。

我有大约 25 个<div> 标签，由于其他 javascripts 调节触摸行为，无法使用通常的方法按随机顺序排列。因此，我试图通过在加载文档时设置不同的innerHTML 值来随机化这些<div>s 的内容。

我有一个脚本，可以根据需要提供随机整数，但是我无法让它填充有序的 div。

这是我正在使用但不起作用的东西：

ArrayList<Integer> list = new ArrayList<Integer>(25);
for(int i = 0; i < 25; i++)
{
  list.add(i);
}
Collections.shuffle(list);

Object[] randomNumbers = (Object[])list.toArray();

function testit() {
for(int i = 0; i < 25; i++)
    {
        var a = document.getElementById('if'+i);
        a.innerHTML = randomNumbers[i];
    }
}

我想看到的是，这会占用我所有的<div>s，这些<div>s 具有诸如“if1”“if2”之类的 id，然后使用随机数字设置该<div> 的内容。

我知道document.getElementById('if'+i) 肯定是获取 ID "if1" 然后 "if2" 的错误方法，但我不太确定还能怎么做。

基本上我只需要一种方法来填充 25 个绝对位置 <div>s 与 25 块 HTML 内容，但以随机顺序。我认为这可以通过将连续数字与随机排序的数字配对并将它们绑定到<div> id 来完成。通常我会用 PHP 来做这件事，但我需要它作为离线移动 web 应用程序工作，所以我试图用 JS 和 CSS 来做。我绝对愿意接受其他方法。

编辑： 如果上面的代码是 Java 而不是 Javascript，那就是问题所在。然后我想我正在寻找替代方法，在 Javascript 中，生成随机的、非重复的整数并将它们链接到顺序整数，都在 1 到 25 之间

【问题讨论】：

你的 JavaScript 代码和你的 Java 代码的关系一点都不清楚。
我的印象是全是javascript，没有java代码。也许我错过了什么。
只有最后两行，以“var a ...”开头，是 JavaScript。其他一切看起来都像 Java。在那种状态下，它在我所知道的任何环境中都无法正常工作。
你能用jsFiddle展示你目前拥有的东西吗？
以上是我目前使用的，加上 ID 为 if1、if2 if3 的 div……如果上面代码的主要部分是 Java，那肯定是我的问题。那么问题是如何用 javascript 做同样的事情。

标签： javascript html css random shuffle

【解决方案1】：

这是一个使用 javascript 的示例实现：

function shuffle(arr){
    //simple shuffle algorithm - you can also use other
    //we will get simple base index as basis for swapping elements
    //we will swap the array elements arr.length times 

    var index = Math.floor(Math.random() * arr.length);
    for(var i=1;i<arr.length; i++) {            
        var t = arr[i];
        arr[i] = arr[index];
        arr[index] = t;
    }
    return arr;
}

//create an array
var numbers =[];
for(var i=0;i<10;i++)
    numbers.push(i);

//call the shuffle function
//call this many times to reshuffle elements
numbers = shuffle(numbers);
//document.write(numbers.join(','));

//test
for(var i=0;i<numbers.length;i++)
{
    var a = document.getElementById('if'+i);
    a.innerHTML = numbers[i];
}

【讨论】：