用原生写随机点名案例

曾经终败给现在 2023-02-10 05:09 14阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
        #name_box li { 
          margin: 10px;
          padding: 10px;
          border: 1px solid white;
          border-radius: 10px;
        }
    
        .active { 
          background-color: white;
          color: black;
          /* 2D转换的属性名 */
          transform: scale(1.3);
          /* 过渡效果的属性名 */
          transition: transform 0.3s;
          /* 位移，属于transform的属性值 */
          /* translate */
        }
      </style>
    </head>
    
    <body style="background-color: black; color: white;">
    
      <div style="display: flex; flex-flow: column; align-items: center;">
        <div>总人数：<span id="total">?</span> 人，抽取： <input type="text" id="size"> 位</div>
        <div>
          <button id="btn" type="button" style="height: 50px; font-size: 20px; margin-top: 10px;">点击随机抽取 ? 位</button>
        </div>
        <div>
          <ul id="name_box" style="list-style: none; margin: 0; padding: 0; display: flex; flex-flow: row wrap;">
          </ul>
        </div>
      </div>
    
      <script>
    
        (() => { 
    
          const btn = document.querySelector('#btn')
          const name_box = document.querySelector('#name_box')
          const sizeInput = document.querySelector('#size')
          const total = document.querySelector('#total')
    
          console.log();
    
          let size = sizeInput.value ? parseInt(sizeInput.value) : 1;
    
          btn.innerHTML = `点击随机抽取 ${ size} 位`
    
          const students = [
          '张三',
                '李四',
                '王五',
                '阿福',
                '旺财',
                '小米',
                '小红',
                '白白',
                '小天',
                '赵六',
                '晓晴',
                '吴浩',
                '阿勇',
                '王武',
                '江山',
                '天下',
                '阮天',
                '萌萌',
                '芒果',
                '卿苑',
                '青柠',
                '青鸢',
                '苹芃',
                '小妮',
                '子依',
                '点点',
                '贤贤',
                '软甜',
                '温柔',
                '御姐',
                '萝莉',
                '嘻嘻',
                '瞅瞅',
                '精灵',
                '鲁班',
                '小智',
                '月月',
                '软软',
                '冉冉',
                '小琪',
                '佳瑞',
                '丫头',
                
          ]
    
    
          const studentIndexs = students.map((v, i) => i)
    
          total.innerHTML = students.length
    
          students.sort(() => 0.5 - Math.random())
    
    
          students.forEach(v => { 
            const li = document.createElement('li')
            li.innerHTML = v
            name_box.appendChild(li)
          })
    
    
          let intervalId = null;
    
          btn.addEventListener('click', () => { 
            // console.log(students.map((v, i) => i)) // .sort(() => 0.5 - Math.random())
            // console.log(students.map((v, i) => i).sort(() => 0.5 - Math.random()))
            // 已开启，就停止
            if (intervalId) { 
              btn.innerHTML = `点击随机抽取 ${ size} 位`
              clearInterval(intervalId)
              intervalId = null
            }
            // 未开启，就开启
            else { 
              btn.innerHTML = '确定选择'
              intervalId = setInterval(() => { 
                [...name_box.children].forEach(li => { 
                  li.classList.remove('active')
                })
                const selectStudentIndexs = studentIndexs.sort(() => 0.5 - Math.random()).slice(0, size)
                selectStudentIndexs.forEach(v => { 
                  name_box.children[v].classList.add('active')
                })
              }, 100);
            }
          })
    
    
          sizeInput.addEventListener('blur', (e) => { 
            // console.log(e.target.value)
            size = parseInt(e.target.value)
            btn.innerHTML = `点击随机抽取 ${ size} 位`
          })
    
        })();
    
      </script>
    </body>
    
    </html>