使用JavaScript怎么實(shí)現(xiàn)一個(gè)點(diǎn)名系統(tǒng)

發(fā)布時(shí)間：2021-04-17 17:09:14 來源：億速云閱讀：268 作者：Leah 欄目：web開發(fā)

這期內(nèi)容當(dāng)中小編將會給大家?guī)碛嘘P(guān)使用JavaScript怎么實(shí)現(xiàn)一個(gè)點(diǎn)名系統(tǒng)，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

1.準(zhǔn)備數(shù)據(jù)并編寫HTML頁面

將所有的數(shù)據(jù)放在一個(gè)數(shù)組中,便于后面根據(jù)角標(biāo)隨機(jī)選取數(shù)據(jù)

<button οnclick="startF2()">開始</button>
<button οnclick="endF2()">結(jié)束</button>
<div id="fa">
 
</div>

//JS中準(zhǔn)備數(shù)據(jù)
//準(zhǔn)備數(shù)據(jù)
var arr = ["1", "2", "3", "4", "5", "6"];
var index = -1; //標(biāo)記被選中的塊的id,下一次循環(huán)時(shí)將該塊的背景改為原來的顏色
var time;

2.在頁面加載時(shí)動態(tài)得將數(shù)據(jù)放在div中展示出來

需要用到onload()方法在頁面加載時(shí)同時(shí)調(diào)用初始化數(shù)據(jù)的方法

function init() {
 //將數(shù)組顯示在頁面上
 for(var i = 0; i < arr.length; i++) {
 //獲取父容器
 var fa = document.getElementById("fa");
 //創(chuàng)建小div
 var div = document.createElement("div");
 //設(shè)置id屬性,方便尋找
 div.id = "id" + i;
 div.className = "box"; //方便給小div設(shè)置樣式
 //設(shè)置小div中顯示的內(nèi)容
 div.innerHTML = arr[i];
 //將小div放在父容器中
 fa.appendChild(div);
 }
 
}

此時(shí)頁面上應(yīng)該可以將數(shù)據(jù)全部顯示出來

3.編寫點(diǎn)擊按鈕時(shí)觸發(fā)的開始隨機(jī)和結(jié)束隨機(jī)的方法

開始隨機(jī)方法

function nowfind() { 
 if(index != -1) {
 //將上一個(gè)選中的div的背景還原
 document.getElementById("id" + index).style.backgroundColor = "gray";
 }
 //隨機(jī)數(shù)
 var num = Math.floor(Math.random() * arr.length);
 index = num; //記錄被選中的div的id
 //獲取對應(yīng)的div
 var div = document.getElementById("id" + num);
 //設(shè)置背景顏色
 div.style.backgroundColor = "pink";
}
 
function startF2() {
 //調(diào)用計(jì)時(shí)器重復(fù)調(diào)用nowfind方法
 time = setInterval("nowfind()",100);//賦值給變量以便于關(guān)閉調(diào)用
}

nowfind()方法是實(shí)現(xiàn)一次隨機(jī)獲取,startF2()方法是利用setInterval()方法周期性得調(diào)用nowfind()方法

nowfind()中進(jìn)行下一次循環(huán)的時(shí)候必須要將上一次選取的數(shù)據(jù)所在的div背景改變回來,否則最終會變成同一色.并且隨機(jī)數(shù)的選取應(yīng)該采用floor()方法向下取整

結(jié)束隨機(jī)方法

function endF2() {
 //停止隨機(jī)獲取姓名
 clearInterval(time);
 alert("請"+arr[index]+"同學(xué)回答問題");
}

結(jié)束時(shí)將數(shù)據(jù)輸出即可

點(diǎn)名系統(tǒng)實(shí)現(xiàn).

效果如下:

隨機(jī)前:

使用JavaScript怎么實(shí)現(xiàn)一個(gè)點(diǎn)名系統(tǒng)

隨機(jī)中:

使用JavaScript怎么實(shí)現(xiàn)一個(gè)點(diǎn)名系統(tǒng)

隨機(jī)結(jié)束:

使用JavaScript怎么實(shí)現(xiàn)一個(gè)點(diǎn)名系統(tǒng)

完整代碼如下:

<!DOCTYPE html>
<html>
 
 <head>
 <meta charset="UTF-8">
 <title></title>
 <script type="text/javascript">
  //準(zhǔn)備數(shù)據(jù)
  var arr = ["1", "2", "3", "4", "5", "6"];
  var index = -1; //標(biāo)記被選中的塊的id,下一次循環(huán)時(shí)將該塊的背景改為原來的顏色
  var time;
  function nowfind() {
 
  if(index != -1) {
   //將上一個(gè)選中的div的背景還原
   document.getElementById("id" + index).style.backgroundColor = "gray";
  }
  //隨機(jī)數(shù)
  var num = Math.floor(Math.random() * arr.length);
  index = num; //記錄被選中的div的id
  //獲取對應(yīng)的div
  var div = document.getElementById("id" + num);
  //設(shè)置背景顏色
  div.style.backgroundColor = "pink";
  }
 
  function startF2() {
  //調(diào)用計(jì)時(shí)器重復(fù)調(diào)用nowfind方法
  time = setInterval("nowfind()",100);//賦值給變量以便于關(guān)閉調(diào)用
  }
 
  function endF2() {
  //停止隨機(jī)獲取姓名
  clearInterval(time);
  alert("請"+arr[index]+"同學(xué)回答問題");
  }
 
  function init() {
  //將數(shù)組顯示在頁面上
  for(var i = 0; i < arr.length; i++) {
   //獲取父容器
   var fa = document.getElementById("fa");
   //創(chuàng)建小div
   var div = document.createElement("div");
   //設(shè)置id屬性,方便尋找
   div.id = "id" + i;
   div.className = "box"; //方便給小div設(shè)置樣式
   //設(shè)置小div中顯示的內(nèi)容
   div.innerHTML = arr[i];
   //將小div放在父容器中
   fa.appendChild(div);
  }
 
  }
 </script>
 <style type="text/css">
  .box {
  width: 100px;
  height: 50px;
  background-color: gray;
  text-align: center;
  line-height: 50px;
  margin: 10px;
  float: left;
  }
 </style>
 </head>
 
 <body οnlοad="init()">
 <button οnclick="startF2()">開始</button>
 <button οnclick="endF2()">結(jié)束</button>
 <div id="fa">
 
 </div>
 </body>
 
</html>

上述就是小編為大家分享的使用JavaScript怎么實(shí)現(xiàn)一個(gè)點(diǎn)名系統(tǒng)了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

使用JavaScript怎么實(shí)現(xiàn)一個(gè)點(diǎn)名系統(tǒng)

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽