快捷導(dǎo)航

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

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

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

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

前言：實(shí)現(xiàn)一個(gè)簡(jiǎn)單的點(diǎn)名系統(tǒng)

需求分析：

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

下面開始實(shí)現(xiàn)

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í)動(dòng)態(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
 //獲取對(duì)應(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背景改變回來,否則最終會(huì)變成同一色.并且隨機(jī)數(shù)的選取應(yīng)該采用floor()方法向下取整

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

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

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

點(diǎn)名系統(tǒng)實(shí)現(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)時(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
  //獲取對(duì)應(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("請(qǐng)"+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>

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

您可能感興趣的文章: