説明[ランダムリスト]

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); 

ビット単位の詳細については

OR見てみhere

Answer 2

まず、あなたget the ul tag, which id is name：ul = document.getElementById("name")

---

あなた clone the node： temp = ul.cloneNode(true)、どのように多くの子供たち（ liタグ）お使いの ulを持っているあなたが買ってあげる

---

： i = temp.children.length + 1（1ループに0をチェックするために）、

---

whileループはx（ x--）をデクリメントして、0より大きいかどうかを確認します。 (i--) > 0、および randomの子をクローンノードに追加します。 temp.appendChild(temp.children[Math.random() * i |0])

---

最後に、 replace all your ul child with your temp (cloned) childs： ul.parentNode.replaceChild(temp, ul)。