只打乱html列表中20个随机项目中的5个(请参阅代码)

Question

早上好，提前感谢整个社区的大力支持。谁能帮我改进这个代码的一个函数，从20个元素的整个列表中随机返回5个元素。我输入的代码现在随机显示整个列表。感谢整个社区。。。

var list = document.getElementById("items"),
newlist = document.getElementById("shuffle");
function shuffle(items)
{
var cached = items.slice(0), temp, i = cached.length, rand;
while(--i)
{
rand = Math.floor(i * Math.random());
temp = cached[rand];
cached[rand] = cached[i];
cached[i] = temp;
}
return cached;
}
function shuffleNodes()
{
var nodes = list.children, i = 0;
nodes = Array.prototype.slice.call(nodes);
nodes = shuffle(nodes);
while(i < nodes.length)
{
list.appendChild(nodes[i]);
++i;
}
}
window.onload = shuffleNodes;

<form id="something">
<div class="classname">

<dl id="items">
<dd>1. item.<br></dd>
<dd>2. item.<br></dd>
<dd>3. item.<br></dd>
<dd>4. item.<br></dd>
<dd>5. item.<br></dd>
<dd>6. item.<br></dd>
<dd>7. item.<br></dd>
<dd>8. item.<br></dd>
<dd>9. item.<br></dd>
<dd>10. item.<br></dd>
<dd>11. item.<br></dd>
<dd>12. item.<br></dd>
<dd>13. item.<br></dd>
<dd>14. item.<br></dd>
<dd>15. item.<br></dd>
<dd>16. item.<br></dd>
<dd>17. item.<br></dd>
<dd>18. item.<br></dd>
<dd>19. item.<br></dd>
<dd>20. item.<br></dd>
</dl>
</div>
</form>

Answer 1

如果你想在屏幕上只保留5个打乱的元素，你应该通过清除列表并在while循环中添加5个元素来修改你的shuffleNode((，如下所示：

function shuffleNodes()
{
var nodes = list.children, i = 0;
nodes = Array.prototype.slice.call(nodes);
nodes = shuffle(nodes);

list.innerHTML = "";

while(i < 5)
{
list.appendChild(nodes[i]);
++i;
}
}

Answer 2

早上好，感谢您的代码！你能给我最后一次帮助吗？我正在尝试，但我无法划分这个列表(共20项(；选择随机元素；混合：2个元素(在0.10之间(和2个元素之间(在10.20之间(，并在页面加载时随机显示所有内容。。。在剪切的列表中，列表被划分(在0和10之间(，并且前2个元素被选择。。。。

var list = document.getElementById("items"),
newlist = document.getElementById("shuffle");
function shuffle(items)
{
var cached = items.slice(0,10), temp, i = cached.length, rand;
while(--i)
{
rand = Math.floor(i * Math.random());
temp = cached[rand];
cached[rand] = cached[i];
cached[i] = temp;
}
return cached;
}
function shuffleNodes()
{
var nodes = list.children, i = 0;
nodes = Array.prototype.slice.call(nodes);
nodes = shuffle(nodes);

list.innerHTML = "";

while(i < 2)
{
list.appendChild(nodes[i]);
++i;
}
}
window.onload = shuffleNodes;

<form id="something">
<div class="classname">

<dl id="items">
<dd>1. item.<br></dd>
<dd>2. item.<br></dd>
<dd>3. item.<br></dd>
<dd>4. item.<br></dd>
<dd>5. item.<br></dd>
<dd>6. item.<br></dd>
<dd>7. item.<br></dd>
<dd>8. item.<br></dd>
<dd>9. item.<br></dd>
<dd>10. item.<br></dd>
<dd>11. item.<br></dd>
<dd>12. item.<br></dd>
<dd>13. item.<br></dd>
<dd>14. item.<br></dd>
<dd>15. item.<br></dd>
<dd>16. item.<br></dd>
<dd>17. item.<br></dd>
<dd>18. item.<br></dd>
<dd>19. item.<br></dd>
<dd>20. item.<br></dd>
</dl>
</div>
</form>