js—利用定时器实现随机点名

大致思路：

1、抓取需要用到的元素，定义var open = false;
2、在onclick事件中使用if判断，当var open = false;时添加定时器timer = setInterval(run,100);让页面一个一个显示数组的内容，并使open = true;
3、当open = true;时，终止定时器clearInterval(timer)

<div id="box">
  <h1>随机点名</h1>
  <p id="uname">小王</p> <button id="btn">开始点名</button>
</div>

CSS

* {
  margin: 0;
  padding: 0;
}

#box {
  width: 500px;
  height: 500px;
  margin: 20px auto;
  border: 2px solid blue;
}

#box h1 {
  text-align: center;
}

#uname {
  width: 100%;
  height: 200px;
  line-height: 200px;
  font-size: 50px;
  text-align: center;
}

#btn {
  display: block;
  width: 100px;
  height: 30px;
  line-height: 30px;
  margin: 170px auto;
}

JavaScript

// 抓取元素 
var uname = document.querySelector('#uname');
var btn = document.querySelector('#btn');
var num = 0;
var timer = null;
var userArr = ['小明', '小红', '小刚'];
var open = false;

function run() {
  num++;
  if (num >= userArr.length) {
    num = 0;
  }
  uname.innerHTML = userArr[num];
}
btn.onclick = function () {
  if (open == false) {
    btn.innerHTML = '停止';
    open = true;
    // 启动定时器
    timer = setInterval(run, 100);
  } else {
    btn.innerHTML = '开始点名'
    open = false;
    // 清除定时器
    clearInterval(timer)
  }
}

代码演示：