我有一个清单：
<ul>
<li>milk</li>
<li>butter</li>
<li>eggs</li>
<li>orange juice</li>
<li>bananas</li>
</ul>
使用 javascript 如何随机重新排序列表项？
javascript - 随机播放 HTML 列表元素顺序
IT技术
javascript
html
html-lists
2021-02-13 01:02:27
6个回答
var ul = document.querySelector('ul');
for (var i = ul.children.length; i >= 0; i--) {
ul.appendChild(ul.children[Math.random() * i | 0]);
}
这是基于Fisher–Yates shuffle，并利用了这样一个事实，即当您附加节点时，它会从旧位置移动。
即使在巨大的列表（100 000 个元素）上，性能也与 shuffle 分离副本的 10% 以内。
简单来说，像这样：
JS：
var list = document.getElementById("something"),
button = 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;
}
}
button.onclick = shuffleNodes;
HTML：
<ul id="something">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<button id="shuffle" type="button">Shuffle List Items</button>
var list = document.getElementById("something");
function shuffleNodes() {
var nodes = list.children, i = 0;
nodes = Array.prototype.sort.call(nodes);
while(i < nodes.length) {
list.appendChild(nodes[i]);
++i;
}
}
shuffleNodes();
用这个：
function htmlShuffle(elem) {
function shuffle(arr) {
var len = arr.length;
var d = len;
var array = [];
var k, i;
for (i = 0; i < d; i++) {
k = Math.floor(Math.random() * len);
array.push(arr[k]);
arr.splice(k, 1);
len = arr.length;
}
for (i = 0; i < d; i++) {
arr[i] = array[i];
}
return arr;
}
var el = document.querySelectorAll(elem + " *");
document.querySelector(elem).innerHTML = "";
let pos = [];
for (let i = 0; i < el.length; i++) {
pos.push(i);
}
pos = shuffle(pos);
for (let i = 0; i < pos.length; i++) {
document.querySelector(elem).appendChild(el[pos[i]]);
}
}
htmlShuffle("ul");<ul>
<li>milk</li>
<li>butter</li>
<li>eggs</li>
<li>orange juice</li>
<li>bananas</li>
</ul>这是一种非常简单的 JS shuffle 方法：
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return 0.5 - Math.random()});