使用原生JS制作点名系统

点名系统

效果：

HTML结构

    <h2 id="selectTitle">被选中的小伙伴：</h2>
    <button class="start">开始</button>
    <button class="stop">结束</button>
    <select  id="time">
      <option>3</option>
      <option>5</option>
      <option>10</option>
    </select>
    <div id="content">
    </div>

CSS样式

        font-family: '微软雅黑';
        /*transition-duration: ;*/
      }

      h1,
      h2 {
        animation: changeColor 2s linear infinite;
        animation-direction: alternate;
      }

      h1 {
        background-color: yellowgreen;
        color: white;
        text-align: center;
      }

      #content > div {
        float: left;
        width: 100px;
        height: 50px;
        margin: 5px;
        font-size: 20px;
        line-height: 50px;
        text-align: center;
      }

      .cell {
        background-color: black;
        color: white;
      }

      .cell.active {
        background-color: skyblue;
        color: crimson;
      }

      .current,
      .a {
        background-color: greenyellow;
        color: blueviolet;
      }

      button {
        display: inline-block;
        height: 50px;
        /*width: 50px;*/
        background-color: yellowgreen;
        color: white;
        font-size: 16px;
        margin: 10px;
      }

      select {
        display: inline-block;
        height: 30px;
        width: 100px;
        border: 1px solid yellowgreen;
        background-color: blanchedalmond;
        color: black;
        font-size: 14px;
        margin: 10px;
      }

      @keyframes changeColor {
        from {
          color: pink;
        }
        to {
          color: blueviolet;
        }
      }
      p {
        width: 50px;
        height: 50px;
        border: 1px solid #000;
      }

JS部分

// 模拟数据
let students = ['司马懿','女娲','百里守约','亚瑟','虞姬','张良','安其拉','李白','阿珂','墨子','鲁班','嬴政','孙膑','周瑜','老夫子','狄仁杰','扁鹊','露娜','丁酉年',	'正月',	'廿二',	'戌时','丁酉',	'壬寅',	'丙子',	'戊戌','火金',	'水木',	'火水',	'土土','山下火',	'金箔金',	'洞下水']

//给window添加事件
window.addEventListener('load',function(){
    // 2. 获取相关元素
    let content = document.querySelector('#content')
    let button = document.querySelector('.start')
    let stop = document.querySelector('.stop')
    let selectTitle = document.querySelector('#selectTitle')
    let selectTime = document.querySelector('#time')
    let count = 0
    let index
    let tid
    //渲染
    function init () {
        let htmlStr = ''
        // 3. 遍历数组: 取出每个元素放到div.cell中, 然后放到显示页面中div.content
        students.forEach(function(v,i){
            htmlStr += `
                        <div class= "cell">${v}</div>
                        `
        })

        content.innerHTML = htmlStr
    }
    init()


    //开始按钮
    button.addEventListener('click',function(){
        button.disabled = true
        stop.disabled = false
        tid =  setInterval(function(){
            let random = getRandom()
            index = random
            count++
           //添加点名效果
        for (let i = 0;i <content.children.length;i++){
            if (content.children[i].innerText == students[index]){
                content.children[i].classList.add('current')
                
            }else{
                content.children[i].classList.remove('current')
            }
            
        }
        //结束条件
        if (count == selectTime.value / 40 *1000) {
            clearInterval(tid)
            button.disabled = false
            count = 0
            for (let i =0 ;i <content.children.length;i++){
                if (content.children[i].innerText == students[index]){
                    content.children[i].classList.add('a')
                    selectTitle.innerHTML += `${students[index]} &nbsp;`
                    students.splice(index,1)
                    break
                    
                }
            }
        }

        },40)
    })
    //生成随机数函数
    function getRandom(num){
        return parseInt(Math.random() * students.length)
    }
    //结束按钮
    stop.addEventListener('click',function(){
        if (count) {
            clearInterval(tid)
            button.disabled = false
            selectTitle.innerHTML += `${students[index]} &nbsp;`
            content.children[index].classList.add('a')
            stop.disabled = true
            
        }
    })
})