<style>
 .cor {
  background-color: #6083cd;
 }
 #box {
  width: 500px;
  border: 2px solid black;
  margin: 0 auto;
  height: 500px;
 }
 ul {
  list-style: none;
 }
 li {
  width: 50px;
  height: 50px;
  margin: 20px;
  float: left;
  line-height: 50px;
  text-align: center;
 }
 .center {
  width: 156px;
  height: 40px;
  line-height: 40px;
  margin: 0 auto;
 }
 #pp {
  display: block;
  text-align: center;
  margin-top: 40px;
  font-size: 35px;
 
 }
 </style>

<div id="box">
 <h1 style="text-align:center">點名系統(tǒng)</h1>
 <div class="center">
  <input type="button" value="開始點名" id="btn">
  <input type="button" value="停止點名" id="btn2">
 </div>
 <span id="pp"></span>
 <div id="dv">
 </div> 
 </div>

<script>
 function my$(id){
  return document.getElementById(id);
 }
 
 
 //定義數(shù)組，存放數(shù)值
 var arr = ["卓子賢","梁圖","袁紹思","張家磊","梁文龍","方志豪","曾勇強","陳文"];
 
 //先創(chuàng)建一個ul加入到名字為dv的div中
 var oul = document.createElement("ul"); 
 my$("dv").appendChild(oul);
 //接下來遍歷arr數(shù)組，動態(tài)創(chuàng)建li元素并且加入到ul中，并且把數(shù)組變量動態(tài)寫到li中
 for(var i=0;i<arr.length;i++){
 oli = document.createElement("li");
 oul.appendChild(oli);
 oli.innerHTML = arr[i];
 }
 
 //先獲取到所有的li，為下面的應(yīng)用css樣式做鋪墊
 var oli = oul.getElementsByTagName("li");
 
 var timer;//這里先定義一個變量，開啟定時器再賦值，
 //為鼠標注冊點擊事件
 my$("btn").onclick=function (){
  clearInterval(timer);//在開啟定時器之前先清除定時器，避免出現(xiàn)用戶多次點擊開啟多個定時器而關(guān)不掉。
  //開啟定時器并賦值給變量
  timer = setInterval(function (){
  var num = parseInt(Math.random()*arr.length);
  console.log(num);
  //這里遍歷所有的li元素，在開啟定時器之前先把所有的li的樣式清除掉
  //如果這里不清除，那么所有的li在下一步都會全部應(yīng)用上css樣式，
  //全部都會高亮顯示,無法實現(xiàn)排他效果
  for(var i=0;i<oli.length;i++){
   oli[i].className = "";
  }
  oli[num].className = "cor";
  //將生成的隨機數(shù)動態(tài)顯示到span中，將最后所選擇的數(shù)組名顯示到span中
  my$("pp").innerHTML = arr[num];
  //console.log(arr[num]);
  },100);
 }
 //停止點名按鈕。
 my$("btn2").onclick=function (){
  clearInterval(timer);
 }
 
</script>