js 实现课堂点名

上机课老师点名（就是抽奖），js 实现

偷懒直接粘代码，实现效果贴张静态图吧（哈哈，我的学生都是美女）

• html

<!-- 上机课老师点击选择按钮，从学生座位表中抽取一名同学 -->
<div class="container" id="room">
  <div class="cell">邱淑贞</div>
</div>
<div class="btn">
  <button onclick="doClick()">点名</button>
</div>

• js 实现

var students = 
  [
     '赵丽颖', '刘亦菲', '鞠婧祎', '孙俪', '宋晓英', 
     '赵静怡', '岳红', '潘虹', '沈丹萍', '张凯丽',
     '周彦宏', '刘丹', '傅艺伟', '苏瑾', '李玲玉',
     '龚雪', '韦唯', '刘怡君', '陈冲', '胡静',
     '白灵', '焦媛', '何晴', '姜培琳', '王希维',
     '王宇婕', '刘亦菲', '杨澜', '田海蓉', '宋丹丹',
     '冯婧', '乐珈彤', '郝蕾', '宋祖英', '刘涛',
     '薛佳凝', '林熙', '黄圣依', '杨若兮', '刘晓庆',
     '李媛媛', '眉佳', '邓婕', '彭心怡', '苗圃',
     '吕燕', '杨幂', '胡可', '牛莉', '鲍蕾'
   ];
 var str = '';
 students.forEach(name => {
   str += `<div class="cell">${name}</div>`;
 });
 document.getElementById('room').innerHTML = str;

 var indexOld = null;
 var timer;
 var times = 0; // 计数器

 function doClick() {
   // 再次点击时
   clearInterval(timer);
   times = 0;
   // 定时器
   timer = setInterval(check, 200);
 }

 // 选择逻辑
 function check() {
   var index = random(0, 49);
   indexOld  !== null ? getChooseMan(indexOld).classList.remove('checked') : '';
   getChooseMan(index).classList.add('checked');
   indexOld = index;
   
   ++times;
   if (times === 10) {
     clearInterval(timer);
     times = 0;
   }
   console.log('person : ', students[index]);
   console.log('times : ', times);
 }

 // 获取选中的 dom 
 function getChooseMan(index) {
   return document.getElementsByClassName('cell')[index];
 }

 // 生成随机数
 function random(min, max) {
   return parseInt(min + (max + 1 - min) * Math.random());
 }

• 附上css

html, body{
  min-width: 1024px;
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   background: #000;
   color: #b6f5d0;
 }
 .container{
   width: 80%;
   margin: 0 auto;
 }
 .cell{
   width: 80px;
   height: 40px;
   line-height: 40px;
   font-size: 20px;
   text-align: center;
   float: left;
   margin: 20px 20px;
 }
 .btn{
   width: 80%;
   margin: 0 auto;
   text-align: center;
 }
 .btn button{
   margin: 20px 0 50px 0;
   width: 100px;
   border-radius: 10px;
   height: 40px;
   letter-spacing: 5px;
   font-size: 14px;
   outline: none;
 }
 .checked{
   background: #ccc;
   color: #000;
   font-size: 16px;
   font-weight: bold;
 }

不周之处请教之，思想需要碰撞，知识需要交流