代码之家 › 专栏 › 技术社区 › Donald Roos

显示列表项的随机选择并随机移动

html-lists html javascript

Donald Roos · 技术社区 · 7 年前

我有一个脚本可以洗牌列表。但我想要的是它洗牌并选择4个项目。这样地:

星期六
星期二
星期一
星期五

我该怎么做?

var ul = document.querySelector('#lister');
for (var i = ul.children.length; i >= 0; i--) {
    ul.appendChild(ul.children[Math.random() * i | 0]);
}

<ul id="lister">
    <li>Sunday</li>
    <li>Monday</li>
    <li>Tuesday</li>
    <li>Wednesday</li>
    <li>Thursday</li>
    <li>Friday</li>
    <li>Saturday</li>
</ul>

2 回复 | 直到 7 年前

Joseph Marikle 7 年前

为什么不使用条件逻辑?如果已经有了最大值,只需删除节点,而不是附加它。

var ul = document.querySelector('#lister');
var max = 4;

for (var i = ul.children.length; i >= 0; i--) {
    if(ul.children.length - i > max) {
        ul.removeChild(ul.children[i]);
    } else {
        ul.appendChild(ul.children[Math.random() * i | 0]);
    }
}

<ul id="lister">
    <li>Sunday</li>
    <li>Monday</li>
    <li>Tuesday</li>
    <li>Wednesday</li>
    <li>Thursday</li>
    <li>Friday</li>
    <li>Saturday</li>
</ul>

moon 7 年前

我根据@Mike的评论编写了这段代码,但我认为@JosephMarike的回答也很棒。正如你们现在所知道的,有很多种方式,你们可以选择:)

var liList = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
var ul = document.querySelector('#ul');
var ix, ixLen, rand;

for(ix = 0, ixLen = 7; ix < ixLen; ix++){
  rand = Math.ceil(Math.random() * ixLen) - 1;
  ul.innerHTML += '<li>' + liList[rand] + '</li>';
  liList.splice(rand, 1);
  ixLen--;
}