思路：首先分别获取红球集合和蓝球集合，然后使用random方法随机生成6个红球和1个蓝球，分别记录其号码和球并加上active，接着将6个红球降序排序，再使用insertBefore方法分别将随机红球、随机蓝球依次插入到对应集合第一个元素前，最后按照要求返回数据即可。

<div class="main">
    <div class="balls red">
        <span>红球</span>
        <div class="balls-wp">
            <b>01</b>
            <b>02</b>
            <b>03</b>
            <b>04</b>
            <b>05</b>
            <b>06</b>
            <b>07</b>
            <b>08</b>
            <b>09</b>
            <b>10</b>
            <b>11</b>
            <b>12</b>
            <b>13</b>
            <b>14</b>
            <b>15</b>
            <b>16</b>
            <b>17</b>
            <b>18</b>
            <b>19</b>
            <b>20</b>
            <b>21</b>
            <b>22</b>
            <b>23</b>
            <b>24</b>
            <b>25</b>
            <b>26</b>
            <b>27</b>
            <b>28</b>
            <b>29</b>
            <b>30</b>
            <b>31</b>
            <b>32</b>
            <b>33</b>
        </div>
    </div>
    <div class="balls blue">
        <span>蓝球</span>
        <div class="balls-wp">
            <b>01</b>
            <b>02</b>
            <b>03</b>
            <b>04</b>
            <b>05</b>
            <b>06</b>
            <b>07</b>
            <b>08</b>
            <b>09</b>
            <b>10</b>
            <b>11</b>
            <b>12</b>
            <b>13</b>
            <b>14</b>
            <b>15</b>
            <b>16</b>
        </div>
    </div>
</div>
<script type="text/javascript">
  randomFn();
  function randomFn() 
  {
    let redballs = document.querySelectorAll(".red .balls-wp b")
    let blueballs = document.querySelectorAll(".blue .balls-wp b")
    let reddiv = document.querySelector(".red .balls-wp")
    let bluediv = document.querySelector(".blue .balls-wp")
    let red = []
    let redB = []
    while(red.length<6)
    {
      let num=Math.floor(Math.random()*33)+1
      if(!red.includes(num))
      {
        red.push(num)
        let redb = redballs[num-1]
        redb.classList.add("active")
        redB.push(redb)
      }
    }
    let blue = Math.floor(Math.random()*16)+1
    let blueB = blueballs[blue-1]
    //不能直接接在后面写 因为add返回的是undefined
    blueB.classList.add("active")
    //按照从大到小 指的是b标签的内部
    redB = redB.sort((a,b)=>b.innerHTML-a.innerHTML)
    for(let i=0;i<6;i++)
    {
        redballs = document.querySelectorAll('.red .balls-wp b')
        //insertBefore是如果原来是子节点则将子节点移动到对应节点前面(删除原本位置) 
        //反之如果原来不是子节点 则将新节点插入到对应节点前面
        reddiv.insertBefore(redB[i],redballs[0])
    }
    bluediv.insertBefore(blueB,blueballs[0])
    //因为涉及到06这种 而redb只是纯数值而已
    return redB.map(ball => ball.innerHTML).reverse().join(',') + '|' + blueB.innerHTML
}
</script>

总结：Math.random()方法用于生成[0,1)之间随机数，如果要生成[a,b]则是Math.floor(Math.random()*(b-a+1))+a；使用arr.length求数组长度，使用arr.push(num)将元素加入数组，使用arr.includes(num)判断数组中是否包含元素；使用set.size求集合长度，使用set.add(num)将元素加入集合，使用set.delete(num)从集合中删除元素，使用set.has(num)判断集合中是否包含元素；使用el.classList.add("class")为el添加类，使用el.classList. remove("class")为el移除类，注意class就是类名，不需要加.号，并且这两个的返回值是undefined，故如果涉及到赋值则需要分开写；parent.insertBefore(n1,n2)是将节点n1插入到节点n2之前，如果n1和n2都是parent的子节点，则直接将n1移到n2之前，反之如果n1不是parent的子节点，则将n1插到n2之前，注意均是则是移动。该题中包含很多细节和技巧，比如不仅存储红球的号码还需要存储红球并处理，这样也为后续的插入做准备，再者就是返回是要使用红球而不仅仅是数字，因为包含诸如06之类的格式。