使用JavaScript怎么實現一個課堂隨機點名系統

這期內容當中小編將會給大家帶來有關使用JavaScript怎么實現一個課堂隨機點名系統，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

style樣式

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

body排列

<div id="box">
 <h2 >點名系統</h2>
 <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>

js代碼

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

上述就是小編為大家分享的使用JavaScript怎么實現一個課堂隨機點名系統了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。