纯js摇号功能的实现

设计思路：

1. 找到了所有的li
2. 把所有的li变成了一个普通数组，具有16个API，包含(排序.forEach...)
3. 创建一个空数组nums
4. 想要往里面放入随机数，但是要保证两个数组的长度要保持一致
5. 把nums和lis结合在一起
6. 在js内存中进行排序
7. 根据数组上树，重新渲染DOM树

代码： 在html中

    <div class="df-c">
        <ul id="ul">
            <li>tom</li>
            <li>jerry</li>
            <li>jack</li>
            <li>rose</li>
            <li>john</li>
            <li>johnson</li>
            <li>jackson</li>
        </ul>
        <button onclick="shake()">点击摇号</button>
    </div>

在css中进行样式的简单设计

li{
    margin: 10px;
}

button{
    margin-left: 20px;
}

在js中进行功能的实现

//第一种方式
function shake() {
  //1.找到所有的li
  let lis = document.querySelectorAll("li");

  //2.把所有的li变成了一个普通数组，具有16个API，包含(排序.forEach...)
  lis = Array.prototype.slice.call(lis);

  //3.创建一个空数组
  let nums = [];

  //4.想要往里面放入随机数，但是要保证两个数组的长度要保持一致
  while (nums.length < lis.length) {
    let num = parseInt(Math.random() * lis.length);
    if (nums.indexOf(num) === -1) {
      nums.push(num);
    }
  }

  //5.用forEach把nums和lis结合在一起,通过设置自定义属性的方式
  lis.forEach((li, index) => li.setAttribute("index", nums[index]));

  //6.在js内存中进行排序
  lis.sort((a, b) => a.getAttribute("index") - b.getAttribute("index"));

  //7.根据数组上树，重新渲染DOM树
  let ul = document.querySelector("ul");
  lis.forEach((li) => ul.appendChild(li));
}

//第二种方式
function shake() {
  // 1.找到所有的li
  var lis = document.querySelectorAll("li");
  // 2.把所有的li变成了一个普通数组，具有16个API，包含(排序.forEach...)
  var nums = Array.from(lis);
  // 3.创建一个空数组
  var arr = [];
  // 4.想要往里面放入随机数，但是要保证两个数组的长度要保持一致
  while (arr.length < nums.length) {
    var num = Math.floor(Math.random() * nums.length) + 1;
    if (arr.indexOf(num) === -1) {
      arr.push(num);
    }
  }
  // 5.把nums和lis结合在一起
  var newArr = nums.map((item, index) => {
    return {
      num: arr[index],
      li: item,
    };
  });
  // 6.在js内存中进行排序
  newArr.sort(function (a, b) {
    return a.num - b.num;
  });
  // 7.根据数组上树，重新渲染DOM树
  var ul = document.querySelector("ul");
  ul.innerHTML = "";
  newArr.forEach(function (item) {
    ul.appendChild(item.li);
  });
}

效果如下：