Question

我有十个元素的数组，其中五个是随机显示的。我想在有序列表中显示这五个随机元素。目的是使列表编号保持不变，而在更改随机元素时保持不变。

我该如何实现？

我尝试了一些方法，但是我无法弄清楚随机元素的存储位置。

     <body>

     <button id="btn" onclick="randomValue()"> Change </button>

     <div id="container">

        <ol id="para"> </ol>

     </div>

     </body>

    var numbers = [

    "Why was the Happy prince weeping?<br>",
    "Why did the Happy Prince give the ruby?<br>",
    "What is the central idea of the poem 'Good Will'?<br>",
    "What was the ill child asking the mother for?<br>",
    "Why is hasty selling disadvantageous?<br>",
    "How should prudent spending of riches be done?<br>",
    "Who advised Wasserkof to get his fess refunded?<br>",
    "Why did the author refuse to go into Lucia's room?<br>",
    "Give a character sketch of Wasserkopf.<br>",
    "How did the war affect the family of the two boys?<br>"
  ];

       function getRandom(arr, count) {

        var shuffled = arr.slice(0),
            i = arr.length,
            min = i - count,
            temp, index;

        while (i-- > min) {

            index = Math.floor((i + 1) * Math.random());

            temp = shuffled[index];

            shuffled[index] = shuffled[i];

            shuffled[i] = temp;

        }

        return shuffled.slice(min);

       }

   function randomValue() {

    document.getElementById("para").innerHTML = getRandom(numbers, 5);

   }

给出Wasserkkopf的角色草图。

我希望数字“ 1”在更改问题时保持不变。

Answer 1

您可以1）生成随机索引，2）对它们进行排序，3）然后将它们映射到数组值：

function getRandom(arr, count) {
  let randomIndices = [];
  while (randomIndices.length < count) {
    let randomIndex = Math.floor(Math.random() * arr.length);
    if (!randomIndices.includes(randomIndex))
      randomIndices.push(randomIndex);
  }
  randomIndices.sort();
  return randomIndices.map(i => arr[i]);
}

let random = getRandom(['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten'], 3);
console.log(random);

Answer 2

这是一种方法。您不需要在元素末尾使用<br>。

var numbers = [
    "Why was the Happy prince weeping?",
    "Why did the Happy Prince give the ruby?",
    "What is the central idea of the poem 'Good Will'?",
    "What was the ill child asking the mother for?",
    "Why is hasty selling disadvantageous?",
    "How should prudent spending of riches be done?",
    "Who advised Wasserkof to get his fess refunded?",
    "Why did the author refuse to go into Lucia's room?",
    "Give a character sketch of Wasserkopf.",
    "How did the war affect the family of the two boys?"
];
let ul = document.getElementById("para");

function randomValue() {
  let copy = [...numbers];
  ul.innerHTML = '';

  for(var i=1; i<=5; i++) {
    let ixElement = Math.floor(Math.random() * copy.length);
    let li = document.createElement("li");
    li.innerHTML = copy[ixElement];
    ul.appendChild(li);
    copy.splice(ixElement, 1);
  }
}

randomValue();

<button id="btn" onclick="randomValue()"> Change </button>
<div id="container">
    <ol id="para"> </ol>
</div>

如何将数组的随机元素添加到有序列表？

2 个答案: