快捷導(dǎo)航

js+html實現(xiàn)點名系統(tǒng)功能

更新時間：2019年11月05日 16:41:29 作者：sanmu_1

這篇文章主要為大家詳細(xì)介紹了js+html實現(xiàn)點名系統(tǒng)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了js+html實現(xiàn)點名系統(tǒng)功能的具體代碼，供大家參考，具體內(nèi)容如下

前言：實現(xiàn)一個簡單的點名系統(tǒng)

需求分析：

1、兩個按鈕實現(xiàn)隨機(jī)點名的開始和結(jié)束(onclick()方法)
2、每一個名字需要放在一個單獨的盒子中并被一個div所包裹,以便于統(tǒng)一格式(動態(tài)生成div)
3、當(dāng)隨機(jī)開始時,隨機(jī)選取一條數(shù)據(jù),并將該條數(shù)據(jù)所在的div背景顏色更改(random()函數(shù)獲得隨機(jī)數(shù),setTimeout()重復(fù)調(diào)用)
4、隨機(jī)結(jié)束時將當(dāng)前的數(shù)據(jù)顯示出來(alert())

下面開始實現(xiàn)

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

將所有的數(shù)據(jù)放在一個數(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)時將該塊的背景改為原來的顏色
var time;

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

需要用到onload()方法在頁面加載時同時調(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);
 }
 
}

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

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

開始隨機(jī)方法

function nowfind() { 
 if(index != -1) {
 //將上一個選中的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)用計時器重復(fù)調(diào)用nowfind方法
 time = setInterval("nowfind()",100);//賦值給變量以便于關(guān)閉調(diào)用
}

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

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

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

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

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

點名系統(tǒng)實現(xiàn).

效果如下:

隨機(jī)前:

隨機(jī)中:

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

完整代碼如下:

<!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)時將該塊的背景改為原來的顏色
  var time;
  function nowfind() {
 
  if(index != -1) {
   //將上一個選中的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)用計時器重復(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>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: