【JavaScript】-ロールコールケース

js：

 

window.addEventListener('load', () => {
    // 模拟数据
    let students = [
        '司马懿',
        '女娲',
        '百里守约',
        '亚瑟',
        '虞姬',
        '张良',
        '安其拉',
        '李白',
        '阿珂',
        '墨子',
        '鲁班',
        '嬴政',
        '孙膑',
        '周瑜',
        '老夫子',
        '狄仁杰',
        '扁鹊',
        '露娜'
    ]
    // 获取元素
    let content = document.querySelector('#content')    // 主体内容结构
    let start = document.querySelector('.start')    // 开始按钮
    let selectTitle = document.querySelector('#selectTitle')    // 被选中的文本
    let timerId     // 定时器句柄

    // 渲染数据
    let htmlStr = ''
    students.forEach((ele, index) => {
        htmlStr += `<div class="cell">${ele}</div>`
    })
    content.innerHTML = htmlStr

    // 添加点击事件
    start.addEventListener('click', () => {
        let time = 0    // 停止定时器条件

        start.disabled = true   // 定时器开始则不能再点击
        // 开启定时器
        timerId = setInterval(() => {
            time++
            // 生成随机数
            let random = parseInt(Math.random() * students.length)
            // 循环遍历
            for (let i = 0; i < content.children.length; i++) {
                if (content.children[i].innerText == students[random]) {
                    content.children[i].classList.add('current')
                } else {
                    content.children[i].classList.remove('current')
                }
            }

            // 判断条件是否为false，则停止定时器
            if (time >= 10) {
                clearInterval(timerId)
                start.disabled = false      // 定时器结束可以点击按钮
                // 循环遍历 
                for (let i = 0; i < content.children.length; i++) {
                    // 判断遍历的文本是否和随机数一样
                    if (content.children[i].innerText == students[random]) {
                        content.children[i].classList.add('a')      // 为遍历到的数据添加类名a
                        // 把文本内容打印放到一个地方
                        selectTitle.innerHTML += students[random] + '&nbsp;'
                        students.splice(random, 1)      // 遍历到的这个数据删除，以免重复
                        break           // 遍历到一个数据就退出循环，免得后期打印出多个数据
                    }
                }
            }
        }, 80)
    })
})

html：

    <h1>点名系统</h1>
    <h2 id="selectTitle">被选中的小伙伴：</h2>
    <button class="start">开始</button>
    <div id="content"></div>

    <script src="./index.js"></script>

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;
        }
      }
      #selectTitle .selectSpan span{
        margin-right: 20px;
      }