【JavaScript】点名案例

点名案例

1. 根据数组动态生成页面结构
2. 开始按钮点击可以点名
   2.1 给随机选中的学生增加样式效果
   2.2 只有最后一个被选中的学生保留样式效果
   2.3 最后选中的学生显示在选中栏中
3. 点名没结束,不能重复点名
4. 被选过的学生不能重复选中

效果如下：

实现步骤

1. 引入数据文件
2. 获取相关元素
3. 遍历数组: 取出每个元素放到div.cell中, 然后放到显示页面中div.content
4. 增加事件函数
   4.1 清理点击事件: 防止随机效果未结束, 二次点击
   4.2 获取次数(时间)选中的值(用于结束定时器): time
   4.3 定义计数器变量count: 记录随机次数, 默认为0
   4.4 定义下标变量index: 记录随机过程中产生的随机下标(被随机选中的学生下标), 值为-1(默认没有被选中的学生)
   4.5 获取当前没有被选中的学生: .cell:not(.current): 直接排除已经被选中的学生, 下次不随机
   4.6 开启定时器
   4.6.1 增加计数器: count
   4.6.2 判定下标变量index: 对应的值是否为-1: -1表示没有元素, 不是-1就干掉index对应的学生的样式current类
   4.6.3 生成随机数: 根据未选中学生长度产生,并赋值给下标变量
   4.6.4 给随机数对应的学生增加样式: current类
   4.6.5 清理定时器: 计数器count是否等于用户选择次数time: 相等, 清理定时器
   4.6.6 清理定时器: 将选中的学生(最后一个) 添加到已选学生栏中
   4.6.7 重新给点名按钮绑定点击事件: go函数

HTML

<h1>点名系统</h1>
    <h2 id="selectTitle">被选中的小伙伴：</h2>
    <button class="start">开始</button>
    <div id="content"></div>
   //引入js文件
    <script src="./index.js"></script>

CSS

* {
        font-family: '微软雅黑';
        /*transition-duration: ;*/
      }
 
      h1,
      h2 {
        animation: changeColor 2s linear infinite;
        animation-direction: alternate;
      }
 
      h1 {
        background-color: pink;
        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;
      }

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)
    })
})