javascript - 说明【随机列表】

Question

关闭。此题需要 details or clarity 。目前不接受答案。

---

想要改进这个问题吗？通过 editing this post 添加详细信息并澄清问题.

已关闭5 年前。

Improve this question

JavaScript 正在随机化列表..我不明白它是如何工作的，请帮我详细解释一下 JavaScript 是如何工作的。

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

     <script>

var ul = document.getElementById("name"), 
    temp = ul.cloneNode(true), 
    i = temp.children.length + 1;

while( i-- > 0 )
    temp.appendChild( temp.children[Math.random() * i |0] );

ul.parentNode.replaceChild(temp, ul);

</script>

Answer 1

//saving <ul> element wiсh id is 'name' to the ul variable
var ul = document.getElementById("name"),  
    //cloning this ul and all its child elements to the temp variable; 
    //cloneNode(true) means deep copy, cloneNode(false) copies only the node 
    temp = ul.cloneNode(true),   
    // we will start from the end of the child nodes array and go down          
    i = temp.children.length + 1; 

//at each iteration we will decrement i and compare it to 0
while (i-- > 0)
    //while this condition is true we take a random node from the child elements array;
    //here we use Math.random() to generate a random number from 0 to 1, 
    //multiply it by i to get a number from 0 to i and then use bitwise OR with 0
    //to convert this floating point number to an integer (see below for more details);
    //and then we append this random child to the temp; if a node already exists
    //in the DOM, then appendNode will remove it before appending, so we just replace
    //the nodes in random order
    temp.appendChild(temp.children[Math.random() * i | 0]);

//and finally we replace the old ul with a new one
ul.parentNode.replaceChild(temp, ul);

有关按位或的更多信息，请查看 here